backbone.js根據另一個事件更新一個視圖？

我有以下的HTML代碼：backbone.js根據另一個事件更新一個視圖？

<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

的感謝！幾個問題：這個模型是從哪裏來的？另外，這看起來像我應該在我的示例中設置第三個視圖，對於單個任務對象，這是否正確？ – GSto 2011-12-22 18:57:03

我創建的第三個視圖（div）用於說明多個視圖如何綁定到相同的集合。 UL綁定到人（'add'）以創建新的li和div綁定到人（'add'）來計算和顯示總數。 this.model是視圖關聯的模型。它是在我去var li = new Li（{model：model}）時創建的;我不小心在div視圖中留下了2個事件，它不會做任何事情......我打算讓div有添加新人的輸入表單字段。） – 2012-01-05 15:30:51

太棒了！ – 3gwebtrain 2013-05-22 09:53:01

backbone.js根據另一個事件更新一個視圖？

回答

相關問題