Не удалось обновить одно значение в простом/плоском наблюдаемом массиве

Question

Если у меня есть простой список строк, я могу добавлять/удалять элементы и обновлять пользовательский интерфейс нокаутом, но как я могу получить редактирование/обновление для работы?

Fiddle: http://jsfiddle.net/5M5bL/2/

Javascript

function myVM() { 
    var self = this; 

    self.myList = ko.observableArray([]); 

    self.editItem = function(data) { 
     $("#dialog-edit").dialog({ 
      resizable: false, 
      height:140, 
      modal: true, 
      title: "Edit " + data, 
      buttons: { 
      "Save": function() { 
       //data("new value"); 
       //data = "new value"; 
       // ??? How would I update this item's myList value from here? 
       $(this).dialog("close"); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
      } 
     }).show(); 
    } 
} 

var vm = new myVM(); 
vm.myList.push(ko.observable("Ham")); 
vm.myList.push(ko.observable("Cheese")); 
vm.myList.push(ko.observable("Egg")); 
ko.applyBindings(vm); 

HTML

<table> 
    <thead> 
     <tr> 
      <th>Food</th> 
      <th> </th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: myList"> 
     <tr> 
      <td data-bind="text: $data"></td> 
      <td><button type="button" data-bind="click: $root.editItem">Edit</button></td> 
     </tr> 
    </tbody> 
</table> 

<div id="dialog-edit" style="display: none"> 
</div> 

Как я могу получить мой editItem/Сохранить функцию для обновления исходного массива MyList? В тот момент, «данные» это просто обычная строка не является обновляемым наблюдаемыми

Так что, если я пытаюсь обновить с данными («New Value») я получаю «данные» ошибок не является функция

Answer 1

я могу найти некоторые вещи в следующем коде,

vm.myList.push(ko.observable("Ham")); 
vm.myList.push(ko.observable("Cheese")); 
vm.myList.push(ko.observable("Egg")); 

Здесь наблюдаемый массив список наблюдаемых холдинга. В Knockout Observable являются анонимными функциями, все наблюдаемые необходимо повторно использовать в будущем. Таким образом, вы должны сделать анонимным наблюдаемым, чтобы его можно было назвать наблюдаемым. Таким образом, я изменил свой код следующим образом,

vm.myList.push({name:ko.observable("Ham")}); 
vm.myList.push({name:ko.observable("Cheese")}); 
vm.myList.push({name:ko.observable("Egg")}); 

Это приведет к некоторым изменениям в HTML следующим образом,

<td data-bind="text: name"></td> 

Теперь вы можете использовать наблюдаемое следующим образом,

data.name("wow"); 

Здесь «данные» - объект в наблюдаемом массиве, а data.name - наблюдаемый.

Fiddle:http://jsfiddle.net/5M5bL/8/

EDIT А есть альтернативный способ. Fiddle здесь http://jsfiddle.net/5M5bL/11/

Answer 2

Изменить функция для цикла в массиве, поскольку параметр является строкой, поэтому вам придется искать его на массиве

function myVM() { var self = this;

self.myList = ko.observableArray([]); 

self.editItem = function(data) { 
    $("#dialog-edit").dialog({ 
     resizable: false, 
     height:140, 
     modal: true, 
     title: "Edit " + data, 
     buttons: { 
     "Save": function() { 
      for(var i = 0;i<self.myList().length;i++) 
      { 
       if(self.myList()[i]() ==data) 
       { 
        self.myList()[i]("New Value"); 
        break; 
       } 
      } 
      $(this).dialog("close"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
     } 
    }).show(); 
} 

}