Question

您好我正在使用来自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绑定到元素，所以select元素没有正确填充。如果我删除元素上的数据绑定并将其放在元素中，如下所示，那么一切正常。

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

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

有什么想法？

Answer 1

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

它还在Knockout 2.0中显示了一种方法（今天12/21/2011），以便将它写得更清洁：

<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>

Answer 2

您应该使用“display：none”属性来隐藏或“visibility：hidden”。

工作代码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);

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

2 个答案: