淘汰内容与数组值的绑定

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/