javascript - Knockout JS foreach 与计算字段的数据绑定(bind)

Question

我正在尝试使用 Knockout.js 在每行中绑定(bind)一个包含 3 个字段的网格:净价(文本框)、税额(标签)、总价(文本框)。

只要净价或总价发生变化，所有字段都会自动计算。计算很简单:净价=总价-税额；总价=净价+税额；税额 = 税率 (const) * 净价

单个实体的这些绑定(bind)在这个 fiddle 中演示:http://jsfiddle.net/ruslans/yEDRT/

但是我不知道如何为可观察数组中的整个列表做这件事？

TaxRate 对于每一行都是常量，但可以不同(它来自源数据)。

还有。所有数字字段必须格式化为 2 个小数位，因此函数。这是我到目前为止所得到的:

<table>
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>Net Price</th>
            <th>Tax Band</th>
            <th>Tax Amount</th>
            <th>Total Price</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: OptionsModel.AvailableDealerFitOptions">
        <tr>
            <td>
                <label class="checkbox">
                    <input type="checkbox" class="optionCheck" /> <span data-bind="text: Description"></span>

                </label>
                <input type="hidden" class="optionTaxRate" data-bind="value: TaxRate" />
            </td>
            <td>
                <input type="number" min="0" max="99999999.99" step="0.01" data-bind="value: $root.formatNumber(NetPrice)" />
            </td>
            <td> <span data-bind="text: TaxBandDisplayName"></span>

            </td>
            <td> <span class="uneditable-input" data-bind="text:  $root.formatNumber(TaxAmount)"></span>

            </td>
            <td>
                <input type="number" min="0" max="99999999.99" step="0.01" data-bind="value: $root.getTotalDealerFitOptionPrice($data)" />
            </td>
        </tr>
    </tbody>
</table>

http://jsfiddle.net/ruslans/k7tK3/2/

你以前做过类似的事情吗？如果是这样，您能给我一些关于如何实现这一目标的指示吗？

Answer 1

你的问题是你正在使用一个可观察的对象数组——只有当数组的大小发生变化时才会重新计算，而不是数组的内容!

你想要的是一个 ko.observable 的数组。然后，当各个值发生变化时，您的 ko.computed 函数将被重新评估。如果您有要求和的动态项目列表，则使用可观察的可观察数组。

希望对您有所帮助!