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>