我想用 ko 绑定(bind)一个简单的结构,但在绑定(bind)过程中遇到异常。 我的虚拟机如下所示:
function VM() {
this["longNameObjId1"] = new Object();
this["longNameObjId1"].records = ko.observableArray();
var obj1 = new Object();
obj1.L1 = "a";
obj1.L2 = "b";
obj1.L3 = "c";
this["longNameObjId1"].records.push(obj1);
var obj2 = new Object();
obj2.L1 = "A";
obj2.L2 = "B";
obj2.L3 = "C";
this["longNameObjId1"].records.push(obj2)
}
我正在尝试迭代 longNameObjId1 属性的 records 数组中的所有对象,并将它们放入表中。我确实需要对记录数组的更改进行一些控制,因此我开始包装 foreach 流控制,如下所示:
ko.bindingHandlers.dynCollection = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, context){
ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, context);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
ko.bindingHandlers.foreach.update(element, valueAccessor, allBindingsAccessor, viewModel, context);
}
};
没什么特别的。在 View 方面,我认为应该这样做:
<!-- ko with: longNameObjId1 -->
<table>
<thead>
<tr>
<th style="width: 33%">L1</th>
<th style="width: 25%">L2</th>
<th style="width: 25%">L3</th>
<th style="width: 17%"></th>
<th></th>
</tr>
</thead>
<tbody id="test_tBody" data-bind="dynCollection: records">
<tr>
<td id="test_td1" data-bind="text: L1"></td>
<td id="test_td2" data-bind="text: L2"></td>
<td id="test_td3" data-bind="text: L3"></td>
</tr>
</tbody>
</table>
<!-- /ko -->
在运行时,我可以在浏览器中看到表格以及预期的数据。我遇到的问题是我收到一个如下所示的异常:
Error: Unable to parse bindings.
Message: ReferenceError: L1 is not defined;
Bindings value: text: L1
我很乐意忽略该错误,因为我可以在浏览器中看到我的数据,但问题是 records 数组并未真正绑定(bind):例如调用 push() 表格显示后(并且错误被忽略)从控制台调用不会触发dynCollection.update()函数。
有人可以指出我的错误在哪里,或者也许是映射记录数组的更好方法吗?
我在 Windows Server 2008 R2 SP1 上使用 Knockout 2.2.1 和 FF 20.0。
如果您需要更多详细信息,请告诉我。
谢谢,
弗洛。
更新
我尝试过使用上下文属性 $data,如下所示:
<td id="test_td1" data-bind="text: $data.L1"></td>
结果出现了相当意外的行为:错误不再出现,但我的表也不再出现:我的页面中有一个空表,但没有错误。关于绑定(bind),肯定有一些我不明白的地方。如果有人能够阐明这种特殊行为,我将不胜感激。谢谢。
最佳答案
只需在 foreach.init
子调用之前添加 return
即可:
init: function (element, valueAccessor, allBindingsAccessor, viewModel, context){
return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, context);
},
这会在记录
未初始化时停止表行模板化。
关于javascript - knockout foreach 嵌套在 with 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16234279/