CODEWITHSUNDEEP
backbone.jsbindingcollectionsviewmodels
IanO.S.
IanO.S.

Reputation: 1382

backbone.js, connecting same collection model for 2 different views

I have a collection, and I'm trying to share information concerning the current model being selected between two different views

-->TO PUT IT SIMPLY, I WANT TO BE ABLE TO ACCESS THE MODEL SELECTED IN ONE VIEW FROM ANOTHER VIEW AND CHANGE/ASSIGN THE ATTRIBUTES OF THE MODEL

The first view is defined with:

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;

    },

the second view is defined with:

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

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

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

and I created my views with the following

addPersonView = new App.Views.AddPerson({ collection: peopleCollection });
appView = new App.Views.App({ model: person, collection: peopleCollection });

How do I make it so that the model selected in the 2nd view is the same as the model in the first view as pulled from my collection --> for example, when I type something into the input box on my bottom view, I want to be able to use: this.set.model({name:title}) and for this to set the model attribute for the element (associated with a model) that is selected in my top view, but using this.set.modelis not choosing the correct model that is selected in my first view

for further reference and confusion: my models are being added to my PeopleView with the following code which i'm loading from an array;

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);

    }
});

Upvotes: 0

Views: 1299

Answers (1)

IanO.S.
IanO.S.

Reputation: 1382

I resolved this by using 'vents' so to speak --> (awesome link) the vents provide ways for views to communicate etc

http://lostechies.com/derickbailey/2012/04/03/revisiting-the-backbone-event-aggregator-lessons-learned/, or an application level aggregator like so:

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

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

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

Upvotes: 0

Related Questions