javascript - 如何在 foreach 中访问 Knockout 组件中的数组成员？

Question

我在让 Knockout 组件工作时遇到问题 - 在使用 $ 访问 foreach 期间，我似乎无法让它正确绑定(bind)到我的 ViewModel 上的数组成员索引。

在 this Fiddle你会明白我的意思的。

有两个小 View 模型:

function OtherThingViewModel(thingString){
   this.thingString = ko.observable(thingString);
}

function ThingViewModel(thingNumber, thing){
    this.thingNumber = ko.observable(thingNumber);
}

实例是在主视图模型中创建的:

function ViewModel(){
    var self = this;

    this.things = [ 
        new ThingViewModel(1),
        new ThingViewModel(2),
        new ThingViewModel(3)
    ];

    this.otherThings = [ 
        new OtherThingViewModel("a Thing"),
        new OtherThingViewModel("another Thing"),
        new OtherThingViewModel("some Thing")
    ];

    this.specialThing = ko.unwrap(this.things)[0];
    this.specialOtherThing = ko.unwrap(this.otherThings)[0];
};

然后我有一个组件:

ko.components.register('combinedthing-component', {
    template:
    '<div>'
    + ' <h3 data-bind="text: \'Thing \' + thing.thingNumber()"></h3>'
    + ' <p>'
    + '     <label>thingNumber: <input data-bind="value: thing.thingNumber" /></label>'
    + '     <span data-bind="text: thing.thingNumber" />'
    + ' </p>'
    + ' <p>'
    + '     <label>thingString: <input data-bind="value: otherThing.thingString" /></label>'
    + '     <span data-bind="text: otherThing.thingString" />'
    + ' </p>'
    + ' <p data-bind="text: JSON.stringify(ko.unwrap(otherThing))"></p>'
    + '</div>'
});

用于显示来自两个 View 模型的数据。

在 HTML 中，我可以成功使用该组件，并使用 foreach 我可以组合这两个对象:

<h1>1 component</h1>
<combinedthing-component params="thing: specialThing, otherThing: specialOtherThing"></combinedthing-component>

<h1>Foreach</h1>
<!-- ko foreach: things -->
    <div>
        <h3 data-bind="text: 'Thing ' + thingNumber()"></h3>
        <p>
            <label>thingNumber <Input data-bind="value: thingNumber" /></label>
            <span data-bind="text: thingNumber" />
        </p>
        <p>
            <label>thingString: <input data-bind="value: $root.otherThings[$index()].thingString" /></label>
            <span data-bind="text: $root.otherThings[$index()].thingString" />
        </p>
    </div>
<!-- /ko -->

但是如果我尝试将两个 - 循环通过 things 与 foreach 结合起来，然后使用 $index 和绑定(bind)访问 otherThings 数组这些到组件:

<h1>Many Components</h1>
<!-- ko foreach: things -->
    <combinedthing-component params="thing: $data, otherThing: $root.otherThings[$index()]"></combinedthing-component>
<!-- /ko -->

然后，当我在 otherThing 中获取一个对象时(如 ko.toJSON 绑定(bind)所证明)，其属性未绑定(bind)到 input 和 span.

什么给出了？

Answer 1

问题是由于使用“Web 组件”语法时参数如何传递到组件中造成的。通过 params="" 传递的对象被转换为依赖的可观察量(计算值)。在幕后，通过此实现，$root.otherThings[$index()]本质上成为计算的可观察量function () { return $root.otherThings[$index()]; }.

要获得所需的最简单方法是在引用 otherThing 时添加 ko.utils.unwrapObservable。这将确保您始终使用实际的 otherThing，而不是包装它的可观察对象。

<label>thingString: <input data-bind="value: ko.utils.unwrapObservable(otherThing).thingString" /></label>
<span data-bind="text: ko.utils.unwrapObservable(otherThing).thingString" />

进行此展开的理想位置是组件注册的 View 模型部分。

JSFiddle