如何通过Ajax更新Kendo UI中kendo.observable对象的数据？

你遇到的核心问题有两个：Ajax回调里的上下文（this）指向错误，以及直接修改observable属性没有触发Kendo MVVM的更新通知。

问题1：Ajax回调中的this指向错误 #

在你的cart.add()方法里，$.ajax的success回调函数中的this并不是指向cart这个kendo.observable对象，而是指向jQuery的Ajax配置对象。这意味着你之前的赋值操作this.contents = ...其实根本没有修改到cart的contents属性（你调试时看到的更新可能是其他误操作导致的）。

问题2：直接赋值observable属性不会触发绑定更新 #

Kendo MVVM的响应式依赖于kendo.observable的set()方法——只有通过set()修改属性，才会触发绑定的模板刷新。直接赋值this.contents = ...只会修改对象属性，但不会通知MVVM系统去更新视图。

修改后的代码示例 #

我们需要同时解决这两个问题，下面是调整后的cart对象代码：

var cart = kendo.observable({
    // 初始化为ObservableArray（可选但推荐，方便后续增删操作自动触发更新）
    contents: new kendo.data.ObservableArray([
        {"item":{"productID":1,"unitPrice":"111.00","image":"5.jpg"},"quantity":1}
    ]),
    add: function (item) {
        // 保存当前cart的上下文，避免Ajax回调里this指向丢失
        var self = this;
        $.ajax({
            type: 'POST',
            url: '{{ path('add_product') }}',
            dataType: 'json',
            data: {'item': JSON.stringify(item)},
            success: function (sessionCart) {
                // 方案1：替换整个数组，用set方法触发视图更新
                self.set("contents", new kendo.data.ObservableArray([
                    {"item":{"productID":1,"unitPrice":"111.00","image":"5.jpg"},"quantity":1},
                    {"item":{"productID":2,"unitPrice":"999.00","image":"8.jpg"},"quantity":1}
                ]));
                
                // 方案2：如果是往原有数组加元素，用ObservableArray的push方法（自动触发更新）
                // self.get("contents").push(newItem);
            },
            // 可选：添加错误处理，方便调试
            error: function(xhr, status, error) {
                console.error("添加商品失败:", error);
            }
        });
    },
    // 其他原有方法（empty、remove等）...
});

关键修改点说明 #

1. 保存上下文：用var self = this;在Ajax外部保存cart对象的引用，确保回调里能正确访问到目标对象。
2. 使用set()方法：通过self.set("contents", newData)修改属性，Kendo MVVM会立即触发模板的同步刷新。
3. ObservableArray优化：把contents初始化为kendo.data.ObservableArray，后续单个元素的增删（比如push、remove）会自动触发视图更新，不需要手动调用set()。

额外验证 #

你当前的绑定代码kendo.bind($("#shop-info"), cartPreviewModel);是正确的，只要cart的contents通过上述方式更新，模板里的quantity、itemPrice等数据就会同步刷新。

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