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

Question

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

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

Чтобы обновить get функции потребности UI кендо, чтобы назвать, но она нуждается в параметре, ссылающийся на имя свойства, которое будет изменяться для каждого экземпляра 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)