Question

您好，我正在使用來自knockout.js的Cart編輯器示例，我遇到了數據綁定衝突。我想寫下面的代碼：

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

但因爲我已綁定類別（）命名的元素，選擇元素不正確填寫。如果我刪除元素的數據綁定並將其放置在元素中，如下所示，那麼一切正常。

<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

您應該使用「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); 

Answer 2

您使用的應該不會造成問題的語法。如果有什麼進一步您的問題，你可以嘗試重現它關閉這個小提琴：http://jsfiddle.net/rniemeyer/WLwRH/

這也表明在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>