backbone.js从JSON渲染多个livel ul-list

Question

我正在从服务器获取对象的集合。

[ 
{"id":1,"name":"test1","parent_id":null}, 
{"id":2,"name":"test2","parent_id":null}, 
{"id":3,"name":"test3","parent_id":2}, 
{"id":4,"name":"test4","parent_id":2} 
] 

我要转换成JSON UL-列表

<ul> 
    <li>test1</li> 
    <li> 
    <ul> 
     test2 
     <li>test3</li> 
     <li>test4</li> 
    </ul> 
    </li> 
</ul> 

我怎样才能使之？

Answer 1

如果你向我们解释你如何组织你的应用程序，我们可能会更好地回答你。

到目前为止，我所能说的是，最好的策略是逐个渲染模型。 看看todo example code以更好地理解我在说什么。

我也假设你使用jQuery。

在该示例中，您在主应用程序中具有适用于整个集合（addAll）的函数和适用于单个模型的函数。

// Add all items in the **Todos** collection at once. 
addAll: function() { 
    MYCOLLECTION.each(this.addOne); 
}, 

addOne: function(todo) { 
    var view = new TodoView({model: MYMODEL}); 
    this.$("#list").append(view.render().el); 
}, 

在此框架下，所有你需要做的是在view.render（）在单一模式功能的观点一些编码，这样

el:$('ul .test0'), 
    render: function() { 
    if (!_.isNull(this.model.get('parent_id'))){ 
     if($("." + this.model.get('parent_id')).length == 0) { 
     //the class doesn't exist because the <ul> hasn't been created yet 
     //so create the <ul> tag 
     $('#'+this.model.get('parent_id')).append("<ul class='"+this.model.get('id')+"'></ul>"); 
     } 
     //now append the <li> element 
     $('.'+this.model.get('parent_id')).append("<li id='"+this.model.get('id')+"'>"+this.model.get('name')+"</li>"); 
     } 
    else{ 
     $(this.el).append("<li id='"+this.model.get('id')+"'>"+this.model.get('name')+"</li>"); 
     } 
    this.$el.html(this.template(this.model.toJSON())); 
    this.$el.toggleClass('done', this.model.get('done')); 
    this.input = this.$('.edit'); 
    return this; 
}, 

在最后，你会有这样一个列表

<ul class='1'> 
    <li id='1'>test1</li> 
    <li id='2'>test2</li> 
    <ul class='2'> 
    <li id='3'>test3</li> 
    <li id='4'>test4</li> 
    </ul> 
</ul> 

想到这个主意吗？ 希望这有助于。

Answer 2

@DanieleB已经比我:)快..但我依然会暴露我的做法至极，我认为是非常相似：

var data = [ 
    {"id":1,"name":"test1","parent_id":null}, 
    {"id":2,"name":"test2","parent_id":null}, 
    {"id":3,"name":"test3","parent_id":2}, 
    {"id":4,"name":"test4","parent_id":2} 
] 

var NestedView = Backbone.View.extend({ 
    render: function(){ 
    this.$el.html("<ul id='ul-null'></ul>") 
    this.collection.each(function(model){ this.renderElement(model) }, this) 
    }, 

    renderElement: function(model){ 
    var ul = this.getParentUl(model); 
    this.appendElement(ul, model); 
    }, 

    getParentUl: function(model) { 
    var ul = this.$el.find("#ul-" + model.get("parent_id")); 
    if(ul.length == 0) { 
     this.appendListInElement(model); 
     ul = this.$el.find("#ul-" + model.get("parent_id")); 
    } 

    return ul; 
    }, 

    appendListInElement: function(model){ 
    var li = this.$el.find("#li-" + model.get("parent_id")); 
    li.after("<ul id='ul-" + model.get("parent_id") + "'></ul>"); 
    }, 

    appendElement: function(ul, model){ 
    ul.append("<li id='li-" + model.get("id") + "'>" + model.get("name") + "</li>"); 
    } 
}); 

var elements = new Backbone.Collection(data); 
var nestedView = new NestedView({ el: "#wrapper", collection: elements }); 
nestedView.render(); 
​ 
​ 

Check the jsfiddle in work

Answer 3

玩弄后配发与fguillen给出的小提琴。我终于解决了我的问题，并转而解决了主要问题。

我的个人任务是使用backbone.js创建bootstrap tabs。

请通过此琴在这里：Nested-Unordered list

谢谢。