我正在寻找一种在KnockoutJS中实现简单嵌套/可嵌套树结构的方法;它应该只允许两个级别。
到目前为止,我发现了这一点(以及一系列非常类似的方法):Knockout.js nested sortable bindings
然而,在这个例子中 - 和其他人一样,“容器”不能成为“儿童”,反之亦然。
基本上,我正在寻找这样的结构:http://jsfiddle.net/uhVAW/2/
即。它最终会呈现一个包含两个级别的列表:父类别及其子级。
Knockout ViewModel中的我的树结构采用这种形状(没有所有更新逻辑):
var VM = function(cats)
{
this.categories = ko.observableArray(cats); // bound to the list
}
var Category = function
{
this.name = ko.observable();
this.children = ko.observableArray([]); // if exists (i.e. if the cat is a parent), this is bound to a list within the <li>
}
所以,实质上:
干杯!
答案 0 :(得分:3)
以下是使用带有递归模板的knockout-sortable的简单树状视图:http://jsfiddle.net/rniemeyer/Lqttf/
视图模型看起来像:
var TreeItem = function(name, children) {
this.name = ko.observable(name);
this.children = children && ko.observableArray(children);
};
ko.applyBindings({
root: new TreeItem("root", [
new TreeItem("A", [
new TreeItem("A1"),
new TreeItem("A2")
]),
new TreeItem("B", [
new TreeItem("B1"),
new TreeItem("B2")
])
])
});
视图如下:
<script id="nodeTmpl" type="text/html">
<li>
<a href="#" data-bind="text: name"></a>
<div data-bind="if: children">
<ul data-bind="sortable: { template: 'nodeTmpl', data: $data.children }"></ul>
</div>
</li>
</script>
<ul data-bind="template: { name: 'nodeTmpl', data: root }"></ul>