knockout.js 购物车编辑器示例中的数据绑定答案

【问题标题】：data-bind in knockout.js Cart editor exampleknockout.js 购物车编辑器示例中的数据绑定
【发布时间】：2012-01-24 22:03:54
【问题描述】：

您好，我正在使用来自 knockout.js 的购物车编辑器示例，我遇到了数据绑定冲突。我想写如下代码：

<td data-bind='visible:(category().name=="Tops")'>Zipper:<br/>
<select data-bind='options: category() ? category().zipper : null, optionsText: "name", optionsCaption: "Select...", value: zipper'></select></td>

但由于我已将 category().name 绑定到元素，因此选择元素无法正确填充。如果我删除元素上的数据绑定并将其放置在元素中，如下所示，那么一切正常。

   <td>Zipper:<br/>
<select data-bind='visible:(category().name=="Tops"), options: category() ? category().zipper : null, optionsText: "name", optionsCaption: "Select...", value: zipper'></select></td>

我认为以某种方式将数据绑定放入元素中会锁定它，因此它无法正常工作，但我不太确定为什么。

有什么想法吗？

【问题讨论】：

标签： jquery knockout.js

【解决方案1】：

您应该使用“显示：无”属性来隐藏或“可见性：隐藏”。

工作代码here (fiddle)

<div id="container">
    <span data-bind='text: category().name == "Tops"'> </span>

    <td data-bind='attr: {style:category().name=="Tops"?"display:none":"display:"}'>Zipper:
        <select data-bind='options: category()? category().zipper: null, optionsText: "name", optionsCaption: "Select..."'></select>
    </td>

</div>

var viewModel = {
    category: ko.observable({
        name: 'Tps', // Change this to Tops to hide
        zipper: [{
            name: 'stack'},
        {
            name: 'over'},
        {
            name: 'flow'}]
    })
};
ko.applyBindings(viewModel);

【讨论】：

【解决方案2】：

您使用的语法应该不会导致问题。如果您的问题还有其他问题，您可以尝试从这个小提琴中重现它：http://jsfiddle.net/rniemeyer/WLwRH/

它还展示了在 Knockout 2.0（今天 2011 年 12 月 21 日发布）中编写更简洁的方法：

<tr data-bind="with: category">
    <td data-bind="visible: name == 'Tops'">
        <select data-bind="options: zipper, optionsText: 'name', optionsCaption: 'Select...', value: $root.zipper"></select>
    </td>
</tr>

【讨论】：