Javascript 在Knockoutjs中设置计算对象的ObservalArray的更好方法

在这篇文章中，我有一个简单的例子来说明我想做什么。一切正常。但是，似乎必须有更好的方法来创建带有一些循环之类的数组。我一整天都在努力，但没有成功。有人能告诉我

这是可能的

我需要表演什么巫术才能让它发挥作用

这是小提琴上的代码

视图：

• 要创建

  topvals

  和

  sidevals

  数组，可以使用
• 要创建计算的

  交点

  ，可以使用函数返回“数组数组”

以下是最终代码（和a）：

以下是观点：

<table>
    <tbody>
        <tr>
            <td></td>
            <!-- ko foreach: topvals -->
            <td >
                <input type="text" data-bind="value: val"/>
            </td>
            <!-- /ko -->
        </tr>
        <!-- ko foreach: sidevals -->
        <tr>
            <td><input type="text" data-bind="value: val"/></td>
            <!-- ko foreach: $root.intersections()[$index()] -->
            <td><span data-bind="text: $data"></span></td>
            <!-- /ko -->
        </tr>
        <!-- /ko -->
    </tbody>
</table>

---

这个简单的视图模型已经做到了：

function ViewModel(vals1, vals2) {
    this.topvals = ko.observableArray(mapToObservables(vals1));
    this.sidevals = ko.observableArray(mapToObservables(vals2));
    this.calc = function (val1, val2) {
        return ko.unwrap(val1) * ko.unwrap(val2);
    };
}

ko.applyBindings(new ViewModel([6, 5, 4, 3], [1, 2, 3]));

其中，

mapToObservables

代表映射插件或类似于此的函数：

function mapToObservables(vals) {
    return ko.utils.arrayMap(vals, function (val) {
        return { val: ko.observable(val) };
    });
};

而这一观点

见：

---

一种变体是对值使用单独的子模型：。对于封装单个值来说，这太过分了，但对于更复杂的结构可能会有用。

如果我能抽象出一个“交集”，这将特别有用，特别是因为有一个中等复杂的方程需要用topval、sideval和一个常量来完成。我也没有弄明白这一点：-/确保手动将KO添加到jsfiddle依赖项中。。在这里根本不起作用。

<table>
    <tbody>
        <tr>
            <td></td>
            <!-- ko foreach: topvals -->
            <td >
                <input type="text" data-bind="value: val"/>
            </td>
            <!-- /ko -->
        </tr>
        <!-- ko foreach: sidevals -->
        <tr>
            <td><input type="text" data-bind="value: val"/></td>
            <!-- ko foreach: $root.intersections()[$index()] -->
            <td><span data-bind="text: $data"></span></td>
            <!-- /ko -->
        </tr>
        <!-- /ko -->
    </tbody>
</table>

function ViewModel(vals1, vals2) {
    this.topvals = ko.observableArray(mapToObservables(vals1));
    this.sidevals = ko.observableArray(mapToObservables(vals2));
    this.calc = function (val1, val2) {
        return ko.unwrap(val1) * ko.unwrap(val2);
    };
}

ko.applyBindings(new ViewModel([6, 5, 4, 3], [1, 2, 3]));

function mapToObservables(vals) {
    return ko.utils.arrayMap(vals, function (val) {
        return { val: ko.observable(val) };
    });
};