Backbone Marionette递归列表

我在制作Marionette递归的正确方法时遇到了一些麻烦。我已经看到了其他一些问题的答案，但我已经在http://jsfiddle.net/vZY2v/中将这个问题分解成了一个非常简单的例子。我知道秘诀在于复合材料的使用，但我没有找到正确的方法去做。Backbone Marionette递归列表

欲产生N级嵌入列表，例如：

<ul> 
    <li>Bob</li> 
    <ul> 
     <li>Jim</li> 
     <li>Jane</li> 
    </ul> 
</ul>

的HTML看起来像：

<body> 
    <div id='myContainer'></div> 
    <script type='text/template' id='my-item'> 
     <%= name %> 
    </script> 
</body>

下面的代码：

var jsonData = [{ 
name: 'Bob', 
children: [{ 
    name: 'Jim' 
}, { 
    name: 'Jane' 
}] 
}, { 
name: 'Sally', 
children: [{ 
    name: 'Sue', 
    children: [{ 
     name: 'John' 
    }, { 
     name: 'Lisa' 
    }] 
}] 
}]; 

var Item = Backbone.Model.extend({}); 

var ItemCollection = Backbone.Collection.extend({ 
    model: Item 
}); 

var i = new Item(); 

var Manager = new Marionette.Application(); 
Manager.addRegions({ 
    mainRegion: "#myContainer" 
}); 

var RecursiveView = Marionette.CompositeView.extend({ 
    tagName: "li", 
    template: '#my-item', 
    initialize: function() { 
     if (this.model.get('children')) { 
      this.collection = new ItemCollection(this.model.get('children')); 
     } 
} 
}); 

var MotherView = Marionette.CollectionView.extend({ 
    tagName: "ul", 
    itemView: RecursiveView 
}); 

var myColl = new ItemCollection(jsonData); 
var x = new MotherView({ 
    collection: myColl 
}); 

Manager.mainRegion.show(x);

所需的输出是如下所示：

鲍勃
- 吉姆
- 简
萨利
- 苏
  - 约翰
  - 丽莎

来源

2014-01-19 rycel

我想我可以用http://jsfiddle.net/nDfCT/1/的更新示例回答我自己的问题。

秘密在移动LI标签到模板和渲染RecursiveView带代替，并添加appendHtml功能是这样的：

var RecursiveView = Marionette.CompositeView.extend({ 
    tagName: "ul", 
    template: '#my-item', 
    initialize: function() { 
    this.collection = this.model.children; 
    }, 
    appendHtml: function (collectionView, itemView) { 
    collectionView.$('li:first').append(itemView.el); 
    } 
});

来源

2014-01-20 14:56:14 rycel

你绝对不应该需要重写appendHtml方式类似 - 这基本上是CompositeView的设计目的。

我已经更新了你的提琴：http://jsfiddle.net/vZY2v/1/

是的，它有一个额外的根节点，但你可以很容易使你的根节点有不同的模板，不渲染li，或者name属性。

主要区别在于使用itemViewContainer可让Marionette将ItemViews插入适合您的位置，而不是自己做。

来源

2014-01-22 00:01:44 Tom

Backbone Marionette递归列表

回答

相关问题