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

backbone.js update one view based on events in another?

本文关键字：视图事件另一个更新一个 js Backbone 更新时间：2023-09-26

我有以下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事件?对于绑定和各种视图、模型和集合之间的交互应该如何工作，我仍然有一些困惑。

下面是一个处理模型/集合的两个视图之间的事件示例。基本上，使用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;