如何使用木偶创建html列表？

Question

• 幻灯片视图
• 选择1
  • 分选1
  • 分选2
  • 分选3

​

• 选择2
  • 分选1
  • 分选2
  • 分选3

​

• 选择3
  • 分选1
  • 分选2
  • 分选3

​

请给我创建一个简单的以上输出，使用木偶。

下面我使用木偶编码

var APP = new Backbone.Marionette.Application();

APP.addRegions({
    appMain:"#main"
});

APP.module("APP",function(module, app, Backbone, Marionette, $, _){
    module.title = Backbone.Model.extend({});
    module.titles = Backbone.Collection.extend({
        model:module.title
    });

    module.subtitle = Backbone.Model.extend({});
    module.subtitles = Backbone.Collection.extend({
        model:module.subtitle
    });

    module.iView = Backbone.Marionette.ItemView.extend({
        tagName:"li",
        template:"#temp-itemview"
    });

    module.csView = Backbone.Marionette.CompositeView.extend({
        template:"#temp-compositeview",
        childView:module.iView,
        itemViewContainer:"ul",
        initialize:function(){
            this.collection = this.model.get('subtitles');
        }
    });

    module.collView = Backbone.Marionette.CollectionView.extend({
        childView:module.csView
    });

    module.addInitializer(function(){
        var array = [   {title:"Show 1",array:[{title:"Sub Show 1"},{title:"Sub Show 2"},{title:"Sub Show 3"}]}, 
                        {title:"Show 2",array:[{title:"Sub Show 1"},{title:"Sub Show 2"},{title:"Sub Show 3"}]}, 
                        {title:"Show 3",array:[{title:"Sub Show 1"},{title:"Sub Show 2"},{title:"Sub Show 3"}]}];
        var titles = new module.titles(array);

        titles.each(function(title){
            var array = title.get('array');
            var subtitles = new module.subtitles(array);
            title.set("subtitles",subtitles);
        });

        var superView = new module.collView({
            collection:titles
        });

        APP.appMain.show(superView);
    });
});

APP.start();

html

<script type="text/template" id="temp-itemview">
    <%= title %>
</script>

<script type="text/template" id="temp-compositeview">
    <ul></ul>
</script>

​

输出不正确clear.Please

Answer 1

下面的解决方案来自于德利克·贝利职位。以下内容适用于backbone.marionette版本2.2.1：

<div id="tree"></div>

<script id="nodeTemplate" type="text/template">
    <li><%= nodeName %></li>
</script>

app = new Backbone.Marionette.Application();

app.addRegions({
    mainRegion: "#tree"
});

var TreeView = Backbone.Marionette.CompositeView.extend({
    template: "#nodeTemplate",    
    tagName: "ul",
    initialize: function(){
        this.collection = this.model.nodes;
    },
});

var TreeRoot = Backbone.Marionette.CollectionView.extend({
    childView: TreeView
});

treeData = [
    {nodeName: "Slide View"},
    {nodeName: "Select 1", 
     nodes: [
         {nodeName: "Sub Select 11"},
         {nodeName: "Sub Select 12"},
         {nodeName: "Sub Select 13"}
     ]},
    {nodeName: "Select 2", 
     nodes: [
         {nodeName: "Sub Select 21"},
         {nodeName: "Sub Select 22"},
         {nodeName: "Sub Select 23"}
     ]},
    {nodeName: "Select 3", 
     nodes: [
         {nodeName: "Sub Select 31"},
         {nodeName: "Sub Select 32"},
         {nodeName: "Sub Select 33"}
     ]},
];

TreeNode = Backbone.Model.extend({
    initialize: function(){
        var nodes = this.get("nodes");
        if (nodes){
            this.nodes = new TreeNodeCollection(nodes);
            this.unset("nodes");
        }
    }        
});

TreeNodeCollection = Backbone.Collection.extend({
    model: TreeNode
});

app.addInitializer(function(options){
    var treeView = new TreeRoot({
          collection: options.tree
    });
    app.mainRegion.show(treeView);
});

$(document).ready(function(){
    var tree = new TreeNodeCollection(treeData);
    app.start({tree: tree});
});

检查这个示例，看看它是如何工作的。请注意外部资源。

您可以阅读德利克·贝利职位的解释和细节。如果你想要理解什么，或者如果你想让我把这个解决方案适应你的，我的意思是，把相同的变量命名，等等，让我知道。我很乐意帮忙。

希望它有用！

Answer 2

您可以使用Marionette来实现以下内容：https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.compositeview.md

您希望为每个视图设置集合，并指定一个childViewContainer ( jquery选择器)。如果您为复合视图设置集合，它将使用相同的视图来呈现该集合中的子视图。

您可以指定一个childView，但我通常不设置该属性，因为它应该递归地调用相同的视图。