backbone.js,为2个不同的视图连接相同的集合模型

时间:2013-02-20 11:42:37

标签: backbone.js binding collections views models

我有一个集合,我正在尝试分享有关在两个不同视图之间选择的当前模型的信息

- >简单地说,我希望能够从另一个视图中获取从一个视图中选择的模型并更改/分配模型的属性

第一个视图定义为:

App.Views.Person = Backbone.View.extend({ 
    tagName: 'a',    
    template: template('personTemplate'),  
    initialize: function(){     
        this.model.on('change', this.render, this);
        this.model.on('destroy', this.remove, this);  
    },   
    render: function() {            
    this.$el.html( this.template(this.model.toJSON()) );
        this.input = this.$('.view');    
        return this;

    },

第二个视图定义为:

 App.Views.App = Backbone.View.extend({
    el: 'html',  

    initialize: function(){
    _.bindAll(this,"render");

    },
    render: function() {
              return this;
    },

我用以下

创建了我的观点
addPersonView = new App.Views.AddPerson({ collection: peopleCollection });
appView = new App.Views.App({ model: person, collection: peopleCollection });

如何制作,以便在第二个视图中选择的模型与从我的集合中拉出的第一个视图中的模型相同 - >例如,当我在底部视图的输入框中键入内容时,我希望能够使用:this.set.model({name:title})并为此设置元素的模型属性(与模型相关联)我的顶视图,但使用this.set.model并未选择在我的第一个视图中选择的正确模型

进一步参考和混淆:我的模型正被添加到我的PeopleView中,其中包含以下代码,我从数组加载;

App.Views.People = Backbone.View.extend({
    // tagName: '',

    initialize: function() {
                var i = 1;
while(i < size)
{

var person = new App.Models.Person({ url: jsArray[i] });// creating a new person object..
        this.collection.add(person); 

        i++
}

        this.collection.on('add', this.addOne, this); 
        console.log(jsArray[1]);
        // listeners/anouncers for the collection on add..
    },

// refactored render method...  
    render: function() {

        this.collection.each(this.addOne, this);
        return this;
    },
// called from render method of collection view..
    addOne: function(person) {
        var personView = new App.Views.Person({ model: person, vent: vent });
        this.$el.append(personView.render().el);

    }
});

1 个答案:

答案 0 :(得分:0)

我通过使用“通风口”来解决这个问题 - &gt; (很棒的链接)通风口提供了交流等方式的方式

http://lostechies.com/derickbailey/2012/04/03/revisiting-the-backbone-event-aggregator-lessons-learned/,或类似的应用程序级聚合器:

MyApp.vent = _.extend({}, Backbone.Events);

MyApp.vent.on("some:event", function(){
alert("some event was fired!");
});

MyApp.vent.trigger("some:event");