knockout.js - 无法让选项卡式 UI 与淘汰赛一起使用

Question

我有这个用淘汰赛创建的简单选项卡式 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)