backbone.jsはJSONからマルチライフリストを表示します

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

Iは、UL-リスト、私はそれをレンダリングすることができますどのように

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

にJSONを変換したいですか？

Answer 1

あなたのアプリをどのように構成したか説明した方がよいでしょう。

ここまでは、モデルを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); 
}, 

は、あなたがする必要があるすべては、あなたがよ終わりにこの

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

のように、単一のモデルの機能の観点からview.render（）でいくつかの符号化ですこのようなリストを持っている

<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

ありがとうございました。