KnockoutClassBindingProvider：foreachバインディングの実行方法

Question

githubの基本的な例を見ていますが、私のコードで動作させることができません。私はdurandalを使っていると付け加えるべきです。

バインディングを動作させるにはどうすればよいですか？私は間違って何かしていますか？

Input.js

define(['knockout'], function (ko) { 

    var ctor = function (value) { 
     //Properties 
     this.value = ko.observable(value); 
     this.placeholder = 'Input'; 

     //Methods 
     this.getBindings = function() { 
      var bindings = {}; 
      bindings.Input = { 
       value: this.value, 
       attr: { 
        placeholder: this.placholder, 
       }, 
      }; 
      bindings.Test = { 
       text: this.value, 
      }; 

      return bindings; 
     }; 
    }; 


    return ctor; 
}); 

Form.js

define(['knockout', 'Input'], function (ko, Input) { 

    var ctor = function (inputs) { 
     //Properties 
     this.inputs = ko.observableArray(inputs); 

     //Methods 
     this.getBindings = function() { 
      var bindings = {}; 
      bindings.Inputs = { 
       foreach: this.inputs, 
       Item: function (context, classes) { 
        return context.$data.getBindings(); 
       }, 
      }; 

      return bindings; 
     }; 
    }; 


    return ctor; 
}); 

Module.js

define(['knockout', 'Input', 'Form'], function (ko, Input, Form) { 
    var ctor = function() { }; 

    ctor.prototype.activate = function() { 
     var data = [ 
      new Input(123), 
      new Input("Chris"), 
      new Input(true) 
     ]; 
     this.form = new Form(data); 
    }; 

    ctor.prototype.binding = function() { 
     var bindings = this.form.getBindings(); 
     ko.bindingProvider.instance.registerBindings(bindings); 
    }; 


    return ctor; 
}); 

Module.htmlこれは動作しません。

<div id="Module"> 
    <div data-class="Inputs"> 
     <div> 
      <input data-class="Inputs.Item.Input" /> 
      <span data-class="Inputs.Item.Test"></span> 
     </div> 
    </div> 
</div> 

Module.htmlこれは、作業を行いますが、私はforeachのためclassBindingProviderを使用していませんよ。

<div id="Module"> 
    <div data-class="Inputs"> 
     <div> 
      <input data-bind="value: value, attr: { placeholder: placeholder }" /> 
      <span data-bind="text: value"></span> 
     </div> 
    </div> 
</div> 

バインディングは発生しません。私は3つの空の入力フィールドを取得します。

Answer 1

私はそれを理解しました。私は動作するコードを投稿します。

2つのことが変更されました。まず、<div data-class="Inputs.Item">を追加して、その場所（InputとTest）に関連するプロパティを参照しました。次に、getBindings関数内でバインディングをすぐに登録します。initBindingsになります。

Input.js

define(['knockout'], function (ko) { 

    var ctor = function (value) { 
     //Properties 
     this.value = ko.observable(value); 
     this.placeholder = 'Input'; 

     //Methods 
     this.initBindings = function() { //FIX: getBindings => initBindings 
      var bindings = {}; 
      bindings.Input = { 
       value: this.value, 
       attr: { 
        placeholder: this.placholder, 
       }, 
      }; 
      bindings.Test = { 
       text: this.value, 
      }; 

      ko.bindingProvider.instance.registerBindings(bindings); //FIX: register instead of return 
     }; 
    }; 

    return ctor; 
}); 

Form.js

define(['knockout', 'Input'], function (ko, Input) { 

    var ctor = function (inputs) { 
     //Properties 
     this.inputs = ko.observableArray(inputs); 

     //Methods 
     this.initBindings = function() { //FIX: getBindings => initBindings 
      var bindings = {}; 
      bindings.Inputs = { 
       foreach: this.inputs, 
       Item: function (context, classes) { 
        context.$data.initBindings(); //FIX: Call the init. 
       }, 
      }; 

      ko.bindingProvider.instance.registerBindings(bindings); //FIX: register instead of return 
     }; 
    }; 

    return ctor; 
}); 

Module.js

define(['knockout', 'Input', 'Form'], function (ko, Input, Form) { 
    var ctor = function() { }; 

    ctor.prototype.activate = function() { 
     var data = [ 
      new Input(123), 
      new Input("Chris"), 
      new Input(true) 
     ]; 
     this.form = new Form(data); 
    }; 

    ctor.prototype.binding = function() { 
     this.form.initBindings(); //FIX: Call the init. 
    }; 

    return ctor; 
}); 

Module.html

<div id="Module"> 
    <div data-class="Inputs"> 
     <div data-class="Inputs.Item"> //FIX: no binding => Inputs.Item 
      <input data-class="Input" /> //FIX: Inputs.Item.Input => Input 
      <span data-class="Test"> //Fix: Inputs.Item.Test => Test 
      </span> 
     </div> 
    </div> 
</div>