这里有一些曾经在Knockout 2上运行的现有代码中工作的东西,我正在重构到Knockout 3。
视图模型的属性从提要(简化代码)初始化:
$.ajax({
url: "/api/GetData",
data: {
clientId: clientId
},
type: "GET",
dataType: "json",
contentType: 'application/json; charset=utf-8',
traditional: true,
success: function (data) {
viewModel.periods(ko.mapping.fromJS(data)());
viewModel.selectedPeriod = ko.observable(viewModel.periods()[0]);
},
async: false
});
调试值时,viewModel.selectedPeriod =
行有效,但绑定不起作用。
所以这失败了。。。
<ul data-bind="foreach: selectedPeriod.Years">
<li data-bind="text: Year"></li>
</ul>
而这是有效的:
<ul data-bind="foreach: periods">
<li>
<ul data-bind="foreach: Years">
<li data-bind="text: Year"></li>
</ul>
</li>
</ul>
我在一个简化的Fiddle中重现了我的问题:https://jsfiddle.net/frankvaneykelen/w3opn442/12/
只需对代码进行一些更改。。。
viewModel.selectedPeriod(viewModel.periods()[0]); // observable method call instead of assigning
<ul data-bind="foreach: selectedPeriod().Years"> // resolve the observable first ...
工作代码可以在这里找到
https://jsfiddle.net/0cLtvqz0/4/
您需要使用with
绑定来适当缩小上下文范围:
https://jsfiddle.net/lobotomize/w3opn442/13/
注意外部div 上的with
绑定
<div class="col-xs-6" data-bind="with: selectedPeriod">
<h5>selectedPeriod.Years</h5>
<ul data-bind="foreach: Years">
<li data-bind="text: Year"></li>
</ul>
</div>