無法獲得標籤式UI與淘汰賽一起工作

Question

我有用淘汰賽創建的這個簡單的tabbed UI，但無法讓它工作。

<div> 
    <div data-bind="foreach:editors"> 
     <a href="#" data-bind="text:$data,click:$parent.selectEditor" /> 
    </div> 
    <div data-bind="foreach:editors"> 
     <h4 data-bind="text:$data,visible:$parent.isVisible" /> 
    </div> 
</div> 


var vm = { 
    editors: ko.observableArray(['Editor1','Editor2']), 
    selectedEditor: ko.observable('Editor1'), 
    isVisible: function(editor){ 
     return selectedEditor() == editor; 
    } 
}; 

vm.selectEditor = function(editor){ 
    vm.selectedEditor(editor); 
}; 

ko.applyBindings(vm) 

當鏈接被點擊時，沒有任何反應。我究竟做錯了什麼？

謝謝。

Answer 1

的問題是在HTML和視圖模型：

見更新小提琴：http://jsfiddle.net/tkirda/LkqTU/9013/

<div> 
    <div data-bind="foreach:editors"> 
     <a href="#" data-bind="text:$data,click:$root.selectEditor"></a> 
    </div> 
    <div data-bind="text: selectedEditor"> 
    </div> 
</div> 

如果要列出所有編輯器，然後隱藏/顯示基於選擇。可觀察到的數組必須是對象的數組（不能是字符串），與ISVISIBLE obesrvable屬性：

editors: ko.observableArray([{ 
     name: 'Editor1' 
     isVisible: ko.observable(false) 
    }, { 
     name: 'Editor2' 
     isVisible: ko.observable(false) 
    } 
]) 

Answer 2

你可以把它簡化有點像這樣：

<div> 
    <div data-bind="foreach:editors"> 
     <a href="#" data-bind="text:$data,click:$root.selectedEditor"></a> 
    </div> 
    <div data-bind="foreach:editors"> 
     <h4 data-bind="text:$data,visible:$root.selectedEditor() == $data" /> 
    </div> 
</div> 

var vm = { 
    editors: ko.observableArray(['Editor1','Editor2']), 
    selectedEditor: ko.observable('Editor1') 
}; 

ko.applyBindings(vm)