在foreach中组合$ parent和$ index

时间:2013-03-19 19:51:37

标签: knockout.js

我有一个有两个数组的视图模型。我想迭代一个数组并访问另一个数组上相同索引处的值,但似乎您不能将$parent$index一起使用。见here

function viewModel(factors,models) {
    this.name="parent View model";
    this.factors = ko.observableArray(factors);   
    this.models = ko.observableArray(models);
}

function subViewModel(name, array) {
    this.anotherArray = ko.observableArray(array);
    this.name = name;
}

ko.applyBindings(new viewModel(
    ["factor1","factor2"],
    [ new subViewModel("model1", ["foo","bar"]), 
    new subViewModel("model2", ["one","two"])
]));

<div data-bind="text:name"></div><hr/>
<div data-bind="foreach:models">
    <div data-bind="text: $parent.factors()[$index]"></div>
    <div data-bind="text:name"></div>
    <hr/>
</div>

如果您将$parent.factors()[$index]更改为$parent.factors()[0],则会显示factors数组中的正确条目。如果仅使用$index替换它,则可以获得正确的索引。但是如果你把它们组合起来,那么敲门人似乎无法在已经有$index的表达式中解析$parent

还有人见过吗?

我知道我可以将我的数组合并到一个结合了属性的视图模型的单个数组中,但我有理由不这样做。这是一个更复杂的视图模型的一部分。

1 个答案:

答案 0 :(得分:3)

$index本身就是可观察的。

来自documentation

  

这是正在呈现的当前数组条目的从零开始的索引   通过foreach绑定。 与其他绑定上下文属性不同,   $ index是一个可观察的......

因此,如果您在表达式中使用它,则需要编写$index()

<div data-bind="text: $parent.factors()[$index()]"></div>

演示JSFiddle.