【发布时间】：2015-12-05 12:22:15
【问题描述】：
我正在尝试使用 Knockout JS 和 Bootstrap 制作多级菜单，但我不确定如何。
这是我目前所拥有的：
var Person = function (name, children) {
this.name = ko.observable(name);
this.children = ko.observableArray(children || []);
};
var PeopleModel = function () {
this.people = ko.observableArray([
new Person("Bob", [
new Person("Jan"),
new Person("Don", [
new Person("Ted"),
new Person("Ben", [
new Person("Joe", [
new Person("Ali"),
new Person("Ken")
])
]),
new Person("Doug")
])
]),
new Person("Ann", [
new Person("Eve"),
new Person("Hal")
])
]);
this.addChild = function (name, parentArray) {
parentArray.push(new Person(name));
};
};
$(function () {
ko.applyBindings(new PeopleModel());
});<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<div class="navbar navbar-default " role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul id="people" class="nav navbar-nav"
data-bind="template: { name: 'personTmpl', foreach: people }">
</ul>
</div>
</div>
<script id="personTmpl" type="text/html">
<li data-bind="css: { dropdown: children().length > 0 }">
<a href="#" data-bind="text: name, visible: children().length < 1"></a>
<a href="#" class="dropdown-toggle"
data-bind="text: name, visible: children().length > 0"
data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu"
data-bind="template: { name: 'personTmpl', foreach: children }">
</ul>
</li>
</script>【问题讨论】：
-
你能把它放在一个小提琴中并准确解释你遇到问题的部分吗？
-
在 Chrome 调试器中检查项目表明结构已经到位。显然 Bootstrap 不喜欢这种结构。
-
当我在我的计算机上尝试时，我看到了数组（Bob 和 Ann）中的根值。我还看到了后代值（Jan-Don 和 Eve-Hal）。但是我看不到Don下的其他值。您可以看到小提琴，但小提琴无法正常工作。 jsfiddle.net/d3ks0dgh/7
-
我找到了一个似乎可以完成你想要的小提琴：jsfiddle.net/MCNK8/3 它可能需要你稍微改变你的结构。
标签： javascript jquery css twitter-bootstrap knockout.js