KnockoutClassBindingProvider:如何执行foreach绑定
KnockoutClassBindingProvider: How to perform a foreach binding
我看到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个空的输入字段
我明白了。我将发布有效的代码。
我改变了两件事。首先,我添加了<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>
相关文章:
- 如果数组仍在执行,async.forEach()将运行我添加到数组中的新元素
- jQuery/Javascript foreach If/Else |如果为空(不执行任何操作)Else(显示forea
- Wordpress:Jquery.html函数现在在PHP foreach循环中执行
- 如何在不选择模式配置参数的情况下,使用mongoose在MongoDB模式实例化中的关联数组/对象中执行foreach
- 在foreach数据绑定完成后执行某些操作
- 异步执行 forEach,就像瀑布一样
- 在 foreach 循环中通过 ajax 加载内容后执行代码
- Mongo forEach 函数仅在第一行执行更新
- 在关联数组的关联数组上执行foreach
- 在Jquery表中执行foreach
- . js forEach()对每个元素执行操作
- 如何使用延迟执行foreach来执行搜索和替换功能.与延迟
- forEach中的return语句不会停止函数的执行
- 为什么不能'对Javascript元素集合执行forEach操作
- 为什么我不能对选择框的选项执行forEach操作?
- 使用forEach顺序执行Q中的函数
- 动态if在foreach绑定中执行"group by"在视图中
- jQuery函数没有在PHP foreach循环中执行
- KnockoutClassBindingProvider:如何执行foreach绑定
- 对array构造函数创建的未定义数组执行forEach操作