KendoUI - пользовательский интерфейс не обновляется после извлечения повторяющихся функций

Question

У меня есть модель представления, которая имеет несколько свойств коллекции с некоторой повторяющейся логикой. Мне нужно иметь возможность добавить новый пустой объект, удалить объект и убедиться, что в каждой коллекции есть хотя бы один объект, и, если это единственный объект, кнопка "Удалить" должна быть отключена.

Чтобы извлечь эти общие функции, я расширил 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 функция. Когда я создаю массив с одним элементом, кнопка "Удалить" отключается - это нормально - но когда я добавляю новые элементы, она не включается.

Чтобы обновить пользовательский интерфейс кендо 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);

( обновленная демоверсия)