淘汰內容與數組值的綁定

Question

我知道這很容易理清，而且可能的答案只是在我的鼻子下面，但是：我試圖創建一個自定義綁定來編輯HTML5的內容this link示例，我無法讓它與observableArray（）一起使用。

表正在顯示在用foreach數據bindig視圖這樣的：

 <tbody data-bind="foreach: customers"> 
      <tr data-bind="attr: {id: $index}"> 
       <td style="text-align: center;"> 
        <span class="label label-primary" data-bind="html: Id"></span> 
       </td> 
       <td data-bind="html: Name, attr: {id: 'Nome'}, contentEditable: true"></td> 
      </tr> 
     </tbody> 

視圖模型是這樣的：

功能視圖模型（）{

 var self = this; 

     self.data = '@jsonList'; 
     self.customers = ko.observableArray(JSON.parse(self.data)); 
     self.editable = ko.observable(false); 

     for (i = 0; i < self.customers().length; i++) { 

      self.customers()[i]['Details'] = '/Anagrafica/Details/' + self.customers()[i]['Id']; 

      self.customers()[i]['Delete'] = '/Anagrafica/Delete/' + self.customers()[i]['Id']; 

     }; 

     ko.bindingHandlers.htmlEdit= { 

      update: function (element, valueAccessor) { 
       var value = ko.unwrap(valueAccessor()); 
      } 
     }; 

     ko.bindingHandlers.contentEditable = { 

      init: function (element, valueAccessor, allBindingsAccessor) { 
       var value = ko.unwrap(valueAccessor()), 
        htmlEdit= allBindingsAccessor().htmlEdit; 

       $(element).on("input", function() { 
        if (ko.isWriteableObservable(htmlEdit)) { 
         htmlEdit(this.innerHTML); 
        } 
       }); 
      }, 

      update: function (element, valueAccessor) { 
       var value = ko.unwrap(valueAccessor()); 
       element.contentEditable = value; 
       $(element).trigger("input"); 
      } 

     }; 
    }; 


    var viewModel = new ViewModel(); 

    ko.applyBindings(viewModel); 

在我對代碼本身有點困惑，因爲我不明白如何將它設置爲指向數組上的元素。

注意：該數組已填充，我沒有顯示內容的問題。

謝謝我提前尋求幫助。

編輯：在這裏我想補充的jsfiddle https://jsfiddle.net/wxn34p45/的代碼

Answer 1

更好的讀看起來像你有一個拼寫錯誤名稱，而不是名稱：

<td data-bind="html: name, attr: {id: 'Nome'}, contentEditable: true"></td> 

而且客戶是不是observableArray（以你的小提琴至少）：

self.customers = ko.observableArray([{"Id":1111,"name":" [Malena]"},{"Id":2222,"name":" [Maria]"},{"Id":3333,"name":" [Merio]"},{"Id":4444,"name":" [Milena]"}]); 

我已經更新了小提琴（也得到了它的淘汰賽跑，我也顯示視圖模型的副本以幫助調試），內容現在是可編輯的。

<h4>View Model</h4> 
    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre> 

這是現在給予預期的效果嗎？

https://jsfiddle.net/asindlemouat/wxn34p45/1/

編輯

隨着提供我已成功地使這個可編輯的詳細信息，我已刪除了客戶陣列可編輯和使用的一個在視圖模型。

由於它循環遍歷客戶數組，因此您需要使用$ parent.editable調用ViewModel中的可編輯觀察值。

<tbody data-bind="foreach: customers"> 
    <tr data-bind="attr: {id: $index}"> 
    <td style="text-align: center;"> 
     <span class="label label-primary" data-bind="html: Id"></span> 
    </td> 
    <td data-bind="html: name, attr: {id: 'Nome'}, contentEditable: $parent.editable"></td> 
    <td></td> 
    </tr> 
</tbody> 

更新小提琴：https://jsfiddle.net/asindlemouat/wxn34p45/8/