配列の値でノックアウトcontentditableバインド

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); 

私は配列上の要素を指すように設定する方法を理解していないので、コード自体についてちょっと混乱しています。

注：配列に値が設定されていますが、コンテンツの表示に問題はありません。

ありがとう、私は助けを前に進んでいます。

編集：あなたの代わりに名前のスペルの間違いの名前を持っていたように、ここで私は、コード

Answer 1

の優れた読み取りのためのJSFiddle https://jsfiddle.net/wxn34p45/を追加ルックス：

<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/

EDIT

私はこれを編集可能にするために管理している提供、さらに情報を使用して、私は顧客の配列から編集可能を削除し、ViewModelにに1を使用しています。

customers配列をループしているので、$ parent.editableを使ってViewModelで編集可能なobservableを呼び出す必要があります。あなたintrestと私のフィドルの編集用のためhttps://jsfiddle.net/asindlemouat/wxn34p45/8/