[英]KnockoutClassBindingProvider: How to perform a foreach binding
I see the basic example on github but I can't get it to work with my code. 我在github上看到了基本示例,但无法使其与我的代码一起使用。 I should add that I'm using durandal.
我应该补充一点,我正在使用durandal。
How do I get the bindings to work? 我如何使绑定起作用? Am I doing anything wrong?
我做错什么了吗?
Input.js 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 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 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 This does not work. 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 This does work but I'm not using classBindingProvider for the foreach. 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>
There's no error message but the binding never happens. 没有错误消息,但是绑定永远不会发生。 I just get 3 empty input fields.
我只得到3个空的输入字段。
I figured it out. 我想到了。 I'll post the code that works.
我将发布有效的代码。
I changed two things. 我改变了两件事。 First, I added
<div data-class="Inputs.Item">
and then referenced the properties relative to that location ( Input
and Test
). 首先,我添加了
<div data-class="Inputs.Item">
,然后引用了相对于该位置的属性( Input
和Test
)。 Second, I register the bindings immediately inside the getBindings
functions, which will now turn them into initBindings
. 其次,我将绑定立即注册到
getBindings
函数中,该函数现在将它们转换为initBindings
。
Input.js 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 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 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 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.