如何通过Ajax调用向Knockout.js的foreach绑定数组添加数据

我看了你的代码，问题主要出在更新observableArray的方式上，还有HTML绑定没写完，下面给你一步步修正和说明：

核心问题分析 #

你原来在Ajax回调里直接把vm.blogUpdate重新赋值成了新的ko.observableArray(response)，这会破坏原来的绑定关联——因为Knockout的绑定是基于初始的observableArray实例的，替换成新实例后，UI就接收不到变化通知了。

修正后的完整代码 #

1. 视图模型与Ajax逻辑（JS部分）

function AppViewModel() { 
    var self = this; 
    self.blogUpdate = ko.observableArray(); 
    // 新增加载状态，提升用户体验
    self.isLoading = ko.observable(true);
} 

var vm = new AppViewModel(); 

$(document).ready(function () { 
    // 先完成绑定，让DOM和视图模型建立关联
    ko.applyBindings(vm); 
    
    $.getJSON('/Blog/GetUpdates?id=89', function (response) { 
        // 正确更新已有observableArray，触发UI更新
        // 替换整个数组：
        self.blogUpdate(response); 
        // 如果是要追加数据而非替换，用下面的写法：
        // self.blogUpdate.push.apply(self.blogUpdate, response);
        
        self.isLoading(false); // 关闭加载状态
    })
    .fail(function() {
        self.isLoading(false);
        console.error('加载博客更新失败');
    });
});

2. 完整HTML绑定代码

<table> 
    <thead> 
        <tr><th>First name</th><th>Last name</th></tr> 
    </thead> 
    <tbody>
        <!-- 加载状态提示 -->
        <tr data-bind="visible: isLoading">
            <td colspan="2">正在加载博客更新...</td>
        </tr>
        <!-- 数据列表绑定 -->
        <tr data-bind="foreach: blogUpdate, visible: !isLoading()">
            <td data-bind="text: firstName"></td> <!-- 注意对应API返回的字段名 -->
            <td data-bind="text: lastName"></td> <!-- 比如你的接口返回的是firstName/lastName，根据实际调整 -->
        </tr>
        <!-- 空数据状态提示 -->
        <tr data-bind="visible: !isLoading() && blogUpdate().length === 0">
            <td colspan="2">暂无博客更新</td>
        </tr>
    </tbody>
</table>

关键要点说明 #

• 不要重新赋值observableArray：直接调用self.blogUpdate(response)就能替换整个数组，或者用push/push.apply追加元素，这样Knockout会自动通知UI更新。
• 提前完成绑定：在Ajax请求前就调用ko.applyBindings(vm)，这样可以在数据加载时显示加载状态，避免页面空白。
• 完善状态反馈：添加加载、空数据、错误状态的提示，让用户清楚当前页面的状态。
• 匹配字段名：HTML里data-bind="text: xxx"的xxx要和你的接口返回的字段完全一致，否则绑定不会生效。

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