0

我正在寻找一种在 KnockoutJS 中实现简单嵌套/可嵌套树结构的方法；它应该只允许两个级别。

到目前为止我发现的是这个（以及在 SO 上的一系列非常相似的方法）：Knockout.js nested sortable bindings

然而，在这个例子中——以及其他例子中，“Containers”不能变成“Children”，反之亦然。

基本上，我正在寻找这样的结构：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>
 }

所以，本质上：

  1. 排序父级
  2. 在父母中对孩子进行分类
  3. 孩子可以成为父母，反之亦然
  4. 仅允许 n 级嵌套（在我的情况下为 2）

干杯!

4

1 回答 1

3

这是一个使用带有递归模板的可淘汰排序的简单树视图：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>
于 2013-09-26T15:03:26.110 回答