backbone.jsは別のビューのイベントに基づいて1つのビューを更新しますか？

私は、次のHTMLコードを持っている：backbone.jsは別のビューのイベントに基づいて1つのビューを更新しますか？

<ul id='item-list'></ul> 
<button id='add-item'>Add Item</button> 
<script type='text/template' id='item-template'> 
    <li><%= title %></li> 
</script>

と次のJavaScript /バックボーンJSコード：

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


var ItemListView = Backbone.View.extend({ 
    el : $("#item-list"), 
    initialize(options) { 
    this.item_collection = new ItemCollection(); 
    }, 
    appendItem: function() { 
    new_item = new Item({'title' : 'New Item'}); 
    this.item_collection.add(new_item); 
    item_template = $("#item-template"); 
    item_html = _.template(item_template,new_item.toJSON()); 
    this.el.append(item_html); 
    } 
}); 

var AddItemView = Backbone.View.extend({ 
    el: $("add-item"), 
    events: { 
    "click" : "addItem" 
    }, 
    addItem: function() { 
    // ? 
    } 
}); 

item_list_view = new ListItemView(); 
add_item_view = new AddItemView();

私はイベントからアイテムリストビューとコレクションに新しい項目を追加することができますどのようにaddItemViewビュー？また、モデルの作成、コレクションへの追加、およびビューへの追加は、すべてListItemView.addItem()関数で行われるか、代わりにItemCollectionのaddイベントにバインドする必要がありますか？私はバインディングや、様々なビュー、モデル、コレクション間のやりとりの中で私の頭を包んでいくのにはまだまだ問題があります。

出典

2011-12-22 GSto

ここでは、モデル/コレクションで動作する2つのビュー間のイベントの例を示します。基本的には、collectionName.bind（ 'add'、yourFunction、this）を使用します。

<script type="text/template" id="item-template"> 
     <div class="nonedit"><span ><%= name %> (<%= age %>)</span> <a class="delete" href="#">X</a> 
     <div class="edit"><input /></div> 

    </script> 
    <body> 
     <ul class="1"></ul> 
     <div class="count"> 
      <div></div> 
      <input id="name" placeholder="enter a name"/> 
      <input id="age" placeholder="enter age"/> 
     </div> 

    </body>

var Person = Backbone.Model.extend({ 
    defaults:function(){ 
     return { 
      name:'unknown', 
      age:0 
     }; 
    } 
}); 

var People = Backbone.Collection.extend({ 
    model:Person 
}); 

var people = new People; 

var Li = Backbone.View.extend({ 
    tag:'li', 
    class:'name', 
    template:_.template($('#item-template').html()), 
    events:{ 
     'click a.delete':'remove' 
    }, 
    initialize:function(){ 
     this.model.bind('change',this.render,this); 
     $(this.el).html(this.template(this.model.attributes)); 
    }, 
    render:function(){ 
     $(this.el).html(this.template(this.model.attributes)); 
    }, 
    remove:function(){ 
     this.model.destroy(); 
     $(this.el).fadeOut(300); 
     setTimeout(function(){$(this.el).remove()},400); 
    }, 
    modify:function(){ 
     $(this.el).addClass('edit'); 
    } 
}); 

var Ul = Backbone.View.extend({ 
    el:$('ul'), 
    events:{ 

    }, 
    initialize:function(){ 
     people.bind('add',this.add,this); 
    }, 
    render:function(){ 

    }, 
    add:function(model){ 
     var li = new Li({model:model}); 
     this.el.append(li.el); 
    } 


}); 

var ul = new Ul; 



var Div = Backbone.View.extend({ 
    el:$('.count'), 
    nameInput:$('#name'), 
    ageInput:$('#age'), 
    events:{ 
     'keypress input#name':'keypress', 
     'keypress input#age':'keypress', 
    }, 
    initialize:function(){ 
     people.bind('add',this.add,this); 
    }, 
    render:function(){ 

    }, 
    add:function(e){ 
     this.el.find('div').html(people.length); 
    }, 
    keypress:function(event){ 
     if(event.which == 13){ 
      people.add({name:this.nameInput.val(),age:this.ageInput.val()}); 
     } 
    } 
}); 

var div = new Div;

出典

2011-12-22 18:44:02

感謝！カップルの質問：this.modelはあなたのリビューからどこから来ますか？また、これは、私の例では3番目のビューを設定する必要があるように見えますが、個々のタスクオブジェクトについては正しいですか？ – GSto

私が作成した3番目のビュー（div）は、複数のビューを同じコレクションにバインドする方法を示しています。 ULは人々（「追加」）にバインドして新しいliを作成し、divは人をバインドして（「追加」）合計を数えて表示します。 this.modelは、ビューが関連付けられているモデルです。私がvar li = new Li（{model：model}）に行ったときに作成されました。（私は誤ってdivビューに2つのイベントを残しましたが、何もしません...私はdivに新しいフォームを追加するための入力フォームフィールドを用意しました） –

素晴らしい答え...素晴らしいです！ – 3gwebtrain

backbone.jsは別のビューのイベントに基づいて1つのビューを更新しますか？

答えて

関連する問題