Knockout.js ViewModel foreach绑定不显示Controller返回的JSON

核心问题清单 #

• 重复触发ko.applyBindings导致绑定上下文冲突
• ViewModel中observable数组的赋值逻辑错误，Knockout无法追踪异步数据更新
• 接口请求路径与返回类型不匹配，混用了页面渲染Action和JSON返回Action
• 数据绑定字段与序列化后的JSON字段大小写不匹配
• 表单类绑定（value）用在了非表单元素（span）上

分步修正操作 #

1. 移除无效的重复绑定逻辑 #

空参的ko.applyBindings()会将全局window作为绑定上下文，直接覆盖后续传入自定义ViewModel的绑定关系，甚至触发重复绑定报错拦截所有渲染，是导致foreach失效的核心诱因之一。
直接删掉require模块内的空参绑定代码：

// 完全删除这段错误逻辑
// require(['knockout', 'jquery', 'bootstrap', 'components/clients-list.component'], function (ko) {
//     ko.applyBindings();
// });

2. 修正ViewModel的异步数据赋值逻辑 #

不要在getJSON回调里直接替换self.machines的整个对象引用——Knockout在初始化绑定时已经缓存了初始observable数组的内存地址，直接替换新的对象引用时，Knockout完全感知不到变化。
原错误写法：

// 错误：替换整个引用，绑定关系还是指向最初的空数组
self.machines = ko.mapping.fromJS([]);
$.getJSON('/Home/Index/', function (data) {
    self.machines = ko.mapping.fromJS(data);
});

修正后的ViewModel逻辑：

var AppViewModel = function () {
    var self = this;
    // 初始化空的observable数组，作为绑定的固定引用
    self.machines = ko.mapping.fromJS([]);

    $.getJSON('/Home/GetMachineList', function (data) {
        // 把返回的JSON内容映射更新到已初始化的observable数组上，不替换原引用
        ko.mapping.fromJS(data, {}, self.machines);
    });
};

$(document).ready(function () {
    // 确保所有依赖加载完成后再执行绑定，避免ko、ko.mapping插件未加载就调用方法报错
    require(['knockout', 'knockout.mapping-latest', 'jquery'], function (ko, komapping) {
        window.ko = ko;
        window.ko.mapping = komapping;
        window.$ = $;
        var viewModel = new AppViewModel();
        ko.applyBindings(viewModel);
    })
});

3. 拆分页面渲染和JSON返回的Action #

直接把原Index方法的返回值从View()改成Json()，会导致浏览器把整个页面识别为文件流触发下载弹窗。需要单独新增一个供AJAX调用的JSON接口，原页面渲染的Index方法保持不变：

// 原有页面渲染方法，负责返回完整Razor视图
public async Task<IActionResult> Index()
{
    return View();
}

// 新增专门供前端AJAX调用的JSON接口
[HttpGet]
public async Task<IActionResult> GetMachineList()
{
    IEnumerable<MachineModel> machineList;
    using (var httpClient = new HttpClient())
    {
        using (var response = await httpClient.GetAsync("https://localhost:44336/api/Machine"))
        {
            string apiResponse = await response.Content.ReadAsStringAsync();
            machineList = JsonConvert.DeserializeObject<IEnumerable<MachineModel>>(apiResponse);
        }
    }
    return Json(machineList);
}

4. 修正DOM绑定的字段匹配问题 #

.NET默认序列化规则会将C#的PascalCase属性名转为camelCase格式（比如MachineId序列化后为machineId、Weight序列化后为weight），同时value绑定仅适用于input、select等表单元素，span标签必须用text绑定：

<tbody data-bind="foreach: machines">
    <tr style="border-bottom: 1px solid #000000;">
        <td>
            <span data-bind="text: machineId"></span>
        </td>
        <td>
            <span data-bind="text: ports"></span>
        </td>
        <td>
            <span data-bind="text: weight"></span>
        </td>
    </tr>
</tbody>

内容的提问来源于stack exchange，提问作者ORed