淘汰赛js foreach不适用于子集合

Question

我有一个模型，我从 json 数据映射，它基本上包含一个类别列表，每个类别中都有一个控件列表...所以，在我的 UI 中，我有一个包含类别列表的面板当用户单击它时，我将整个类别推送到（在加载时）空的可观察对象以在另一个面板中呈现...单击功能似乎正在工作，但使用 foreach 在我的第二列中没有呈现任何内容陈述。任何帮助，将不胜感激。我的 json 数据有点长，所以最好在这里参考我的小提琴：

http://jsfiddle.net/TU3ps/4/

但这是我试图教孩子的方式，我的语法在这里不好吗？

        <div class="left">Click any of the below categories to see its controls...
            <ul data-bind="foreach:  Categories">
                <li data-bind="click:  $parent.catClick"> 
                    <span data-bind="text:  Text"></span>
                </li>
            </ul>
        </div>
        <div class="right">Controls within the category clicked...
            <ul data-bind="foreach:  Curr.Ranges">
                <li>
                    <span data-bind="text:  FieldName" />
                </li>
            </ul>
        </div>

我应该这样做有更好的方法吗？基本上，我希望我的右侧面板一次只显示一个集合。我现在要做的就是显示字段名，但没有显示任何内容。任何帮助将不胜感激....

Answer 1

看起来你希望 Curr 是一个 observable，而不是 observableArray，而且你没有正确分配它：

viewModel.Curr = ko.observable();
// Inside your click method
viewModel.Curr(category);

您还需要添加 Ranges 的虚拟属性，否则会在初始 applyBindings 上炸毁：

viewModel.Curr = ko.observable({ Ranges: [] });