KendoUI - UI 提取重复函数后未刷新

Question

我有一个视图模型，它有几个带有一些重复逻辑的集合属性。我需要能够添加一个新的空对象，删除一个对象，并确保每个集合至少有一个对象，如果它是唯一的对象，应该禁用 "Delete" 按钮。

为了提取这些常用函数，我扩展了 kendo.data.ObservableArray:

function addEmpty() {
  this.push({});
}

function hasMoreThanOne {
  return this.length > 1;
}

var CoolObservableArray = kendo.data.ObservableArray.extend({
  init: function(data) {
    kendo.data.ObservableArray.fn.init.call(this, data);

    this.addEmpty = addEmpty.bind(this);
    this.hasMoreThanOne = hasMoreThanOne.bind(this);
  }
});

问题出在 hasMoreThanOne 函数上。当我创建一个包含单个元素的数组时，"Delete" 按钮被禁用 - 没关系 - 但当我添加新元素时，它不会被启用。

要刷新UI需要调用kendo的get函数，但是需要一个参数引用属性的名字，这个参数会因人而异CoolObservableArray 的每个实例，所以我需要为每个集合编写重复函数，如 deleteXXXEnabled、deleteYYYEnabled 等。如何避免它？

这里是有问题重现的fiddle：http://dojo.telerik.com/AFOMa/2

Answer 1

源绑定仅呈现您添加到 ObservableArray 的新对象，因为通知绑定的更改事件仅指示添加了新项目。

您可以通过手动触发更改事件强制源绑定重新呈现整个视图：

var CoolObservableArray = kendo.data.ObservableArray.extend({
    init: function (data, type) {
        kendo.data.ObservableArray.prototype.init.call(this, data, type);

        this.addEmpty = addEmpty.bind(this);
        this.deleteObject = deleteObject.bind(this);
        this.hasMoreThanOne = hasMoreThanOne.bind(this);    
        this.bind("change", function (e) {      
            if (e.action === "add" || e.action === "remove") {
                var that = this;

                // trigger another change which is not an "add" 
                // or "remove" or "itemchange" action
                setTimeout(function () {
                    that.trigger("change");
                }, 5);   
            }
        });  
    }
});

var viewModel = kendo.observable({
    wares: new CoolObservableArray([
        {title: "hampton sofa", price: 989}
    ])
});

kendo.bind("#waresWrapper", viewModel);

(updated demo)

KendoUI - UI 提取重复函数后未刷新

KendoUI - UI not refreshed after extracting repeating functions

javascript

kendo-ui

observable

kendo-mvvm

kendo-observable