backbone.js обновить одно представление на основе событий в другом? - PullRequest
Новая
       4

backbone.js обновить одно представление на основе событий в другом?

3 голосов
/ 22 декабря 2011

У меня есть следующий 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 / магистральный 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(), или я должен вместо этого связать ее с событием add ItemCollection?У меня все еще есть некоторые проблемы, связанные с тем, как должны работать привязки и взаимодействия между различными представлениями, моделями и коллекциями.

1 Ответ

2 голосов
/ 22 декабря 2011

Вот пример событий между двумя представлениями, работающими с моделью / коллекцией.В основном, используйте 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;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...