Backbone.js 根据另一个视图中的事件更新一个视图？答案

【问题标题】：backbone.js update one view based on events in another?Backbone.js 根据另一个视图中的事件更新一个视图？
【发布时间】：2011-12-22 18:11:04
【问题描述】：

我有以下 HTML 代码：

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

以及以下 javascript/backbone 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 事件？我仍然无法理解绑定的方式以及各种视图、模型和集合之间的交互应该如何工作。

【问题讨论】：

标签： javascript model-view-controller backbone.js

【解决方案1】：

这是一个使用模型/集合的 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;

【讨论】：

谢谢！几个问题：在您的 li 视图中 this.model 来自哪里？另外，这看起来我应该在我的示例中为单个任务对象设置第三个视图，对吗？
我创建的第三个视图（div）是为了说明多个视图如何绑定到同一个集合。 UL 绑定到 people('add') 以创建新的 li，div 绑定到 people('add') 以计算和显示总数。 this.model 是视图关联的模型。它是我去时创建的 var li = new Li({model:model}); （糟糕，我不小心在 div 视图中留下了 2 个事件，它们没有做任何事情......我打算让 div 具有用于添加新人的输入表单字段。）
很棒的答案...太棒了！