KnockoutJS和嵌套可排序列表（二维）

我正在寻找一种方法来在KnockoutJS中实现简单的嵌套/可嵌套树结构;它应该只允许两个级别。KnockoutJS和嵌套可排序列表（二维）

我找到了到目前为止，这是（和一系列非常类似的做法在这里SO）：Knockout.js nested sortable bindings

然而，在这个例子中 - 和其他人，“容器”不能成为“儿童”，反之亦然。

基本上，我在寻找这样的结构：http://jsfiddle.net/uhVAW/2/

即它最终将呈现一个包含两个级别的列表：父类别及其子级。

我的树结构在淘汰赛视图模型采用这种形状（没有所有的更新逻辑）：

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> 
}

因此，从本质：

排序母公司层面
排序儿童中父母
孩子可以成为父母&反过来
只允许n层嵌套（2在我的情况下）

干杯！

来源

2013-09-26 JDR

下面是使用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>

来源

2013-09-26 15:03:26

这是绝对太棒了 - 谢谢一堆！我稍微修改了它，以确保至少有一个空的observableArray。否则，不能将项目添加到空列表中：http://jsfiddle.net/Lqttf/1/ | 这就是说：你会有任何指示，我怎么只能允许两个级别？再次感谢！ – JDR

好的，我有点慢。我可以将allowDrop绑定到可观察的布尔值，从第二级开始返回“false”。 :-) – JDR

@niemeyer先生，首先感谢您的有关KNOCKOUT-SORTABLE，KNOCKOUT-RECURSIVE的解决方案。先生，我也在寻找确切的解决方案，你在上面提到，我想一个解决方案来计算每个节点的总数。每个节点都有两个属性（标题，金额），所以我需要在父节点上显示金额（儿童）的总和。 –

KnockoutJS和嵌套可排序列表（二维）

回答

相关问题