KnockoutClassBindingProvider：如何執行一個foreach綁定

Question

我在github上看到了一個基本的例子，但我無法讓它與我的代碼一起工作。我應該補充一點，我正在使用杜蘭達。

如何讓綁定工作？我做錯了什麼？

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這並不工作，但我不使用classBindingProvider對foreach。

<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

我想通了。我將發佈可用的代碼。

我改變了兩件事。首先，我添加了<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>