Question

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

为了提取这些常用函数，我扩展了k endo.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功能。当我使用单个元素创建数组时，＆＃34;删除＆＃34;按钮被禁用 - 没关系 - 但是当我添加新元素时，它不会被启用。

要刷新UI，需要调用kendo的get函数，但它需要一个引用属性名称的参数，该参数因CoolObservableArray的每个实例而异，所以我需要为deleteXXXEnabled，deleteYYYEnabled等每个集合编写重复函数。我怎样才能避免它？

这是问题再现的小提琴：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不刷新

1 个答案: