удаление элементов из массива с knockoutjs ES5

Question

Fiddle

Я пытаюсь использовать knockout.js с плагином ES5, но я не в состоянии получить удаление из массива на работу.

Кажется, что вы работаете, но вы можете удалить его, но в массиве всегда остался один элемент, но на самом деле это не так. Я совершенно смущен, почему это не работает, как вы думаете.

Что я делаю неправильно?

(у меня есть более сложный сценарий, который использует Дюрандаль виджет, но я был в состоянии варить его вниз, чтобы только это, так что я думаю, что ES5 плагин является виновником)

Вот моя разметка:

<div data-bind="foreach: staffList" style="border:1px solid black;"> 
    <div style="border: 1px solid red;"> 
     <p data-bind="text: Name"></p> 
     <p> 
      <button data-bind="click: deleteClickHandler">Delete</button> 
     </p> 
    </div> 
</div> 

и сценарий:

function ctor(){ 
    var self=this; 
    self.staffList = [{Name:'one'},{Name:'two'},{Name:'three'},{Name:'four'}]; 
    ko.track(self.staffList, { deep: true }); 
    self.deleteClickHandler = function (obj) { 
    //TODO show confirm dialog first 
    var index = self.staffList.indexOf(obj); 
    if (index >= 0) { 
     self.staffList.splice(index, 1); 
    } 
    }; 
} 
ko.applyBindings(ctor); 

единственное различие в реальном мире является то, что я получаю данные от вызова API, но поведение такое же.

Answer 1

Интересный вопрос. Я еще не уверен в первопричине, но мне удалось найти способ заставить его работать.Некоторые изменения мне нужно было:

• Марка ctorреальной функции Constructor/использовать его в качестве такового;
• Из-за предыдущего пункта вам необходимо указать deleteClickHandler с определенной областью;
• Трек self, а не только один член;

Вот пример, который works для меня:

<div data-bind="foreach: staffList" style="border:1px solid black;"> 
    <div style="border: 1px solid red;"> 
     <span data-bind="text: Name"></span> 
     <button data-bind="click: $root.deleteClickHandler">Delete</button> 
    </div> 
</div> 
<hr> 
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre> 

function ViewModel(){ 
    var self = this; 
    self.staffList = [{Name:'one'},{Name:'two'},{Name:'three'},{Name:'four'}]; 
    ko.track(self); 
    self.deleteClickHandler = function (obj) { 
    var index = self.staffList.indexOf(obj); 
    if (index >= 0) { 
     self.staffList.splice(index, 1); 
    } 
    }; 
} 
ko.applyBindings(new ViewModel()); 

Кроме того, я хочу отъ отметить, что это возможно:

self.deleteClickHandler = function (obj) { 
    self.staffList.remove(obj); 
    }; 

Опять же, я не конечно, почему ko.track(self.staffList) не работал, но выше, по крайней мере, вы идете.

Answer 2

кнопку, который вложен в пределах neads цикла Еогеасп для ссылки на родительский, так что бы

<button data-bind="click: $root.deleteClickHandler">Delete</button> 

вместо

<button data-bind="click: deleteClickHandler">Delete</button> 

Я только проверил это, и обнаружили, нет оставшегося элементы, перечисленные в представлении. Это должно решить проблему, которую вы видите, поскольку я вижу пустой массив после удаления последнего элемента.

Кроме того, я должен был изменить ko.applyBindings вызов ko.applyBindings(new ctor()); и удалить вызов ko.track в пользу нормального наблюдаемого массива для staffList объекта. Если не было определенной причины, вы не можете использовать наблюдаемый массив?

JSFiddle Example