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をバインドしているため、選択要素が正しく記入されません。もし私が要素上のデータバインドを削除し、以下に示すように要素に配置すると、すべて正常に動作します。

<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

「表示：なし」属性を使用して非表示にするか、「表示：非表示」にする必要があります。

の作業コード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/

はまた、それを少しクリーナーを書くために（今日2011年12月21日から）ノックアウト2.0での方法を示しています

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