Javascript 如何使用knockoutJS呈现嵌套导航?
我有一个表示导航的嵌套数组(参见下面的JSFIDLE)。我想用knockoutJS呈现这个导航,但不知道如何呈现。我已经阅读了官方文档,但它们只涵盖了一个简单的列表/集合 您需要使用绑定 更新:我删除了无容器的foreach,并改为使用模板绑定的foreach选项。下面的工作示例也已更新 HTML:Javascript 如何使用knockoutJS呈现嵌套导航?,javascript,arrays,knockout.js,Javascript,Arrays,Knockout.js,我有一个表示导航的嵌套数组(参见下面的JSFIDLE)。我想用knockoutJS呈现这个导航,但不知道如何呈现。我已经阅读了官方文档,但它们只涵盖了一个简单的列表/集合 您需要使用绑定 更新:我删除了无容器的foreach,并改为使用模板绑定的foreach选项。下面的工作示例也已更新 HTML: 这是一个例子 首先:谢谢。这似乎是正确的答案。但我还有一个问题:看起来你需要模板中的HTML注释来创建某种上下文,对吗?是的,所有控制子体绑定的KO绑定(如foreach、if、template等)
这是一个例子 首先:谢谢。这似乎是正确的答案。但我还有一个问题:看起来你需要模板中的HTML注释来创建某种上下文,对吗?是的,所有控制子体绑定的KO绑定(如foreach、if、template等)也可以应用于KO注释,以防您没有父容器。在某些情况下,这是唯一的解决方案,因为您不能对任何一个元素应用多个这样的绑定。我用官方解释的链接更新了我的答案。
<script type="text/html" id="node-template">
<li>
<a data-bind="text: Title, attr:{href: Target}"></a>
<ul data-bind="template: { name: 'node-template', foreach: Children }"></ul>
</li>
</script>
<ul data-bind="template: { name: 'node-template', foreach: Nodes }"></ul>
function NavigationNode(target, title)
{
var self = this;
self.Target = target || "[No Target]";
self.Title = title || "[No Title]";
self.Children = ko.observableArray([]);
};
function NavigationViewModel()
{
var self = this;
self.Nodes = ko.observableArray([]);
var node1 = new NavigationNode("/parent", "Parent");
var node2 = new NavigationNode("/parent/sub1", "Sub 1");
var node3 = new NavigationNode("/parent/sub1/sub2", "Sub 2");
node2.Children().push(node3);
node1.Children().push(node2);
self.Nodes.push(node1);
ko.applyBindings(this);
};
new NavigationViewModel();