Search code examples
javascriptbackbone.jsbackbone-viewsbackbone-eventsbackbone.js-collections

Pass values between views in backbone


I have 2 views and need to pass values between them.

var appModel1 = Backbone.Model.extend({
        url: '/',
        defaults: {
            name: 'Default name'
        },
        validate: function(attr){

        }
    });

    var appCollection1 = Backbone.Collection.extend({
        model: appModel1
    });

    var collection1 = new appCollection1();

    var model1 = new appModel1();
    model1.bind('change', function(){
        model1.save();
    });


    var appView1 = Backbone.View.extend({
        model: model1,
        _modelDataBind: undefined,
        el:'#container1',
        initialize: function(){
            this._modelDataBind = new Backbone.ModelBinder();
            this.render();
        },
        render: function(){
            var template = _.template($('#app1').html());
            this.$el.html(template);
            var bindings = {
                    name: '#txtName'
            };
            var changeTrigger = {
                    'changeTriggers': {
                        '': 'keyup',
                        '#txtName': 'keyup'
                    }
            };
            this._modelDataBind.bind(this.model, this.$el, bindings, changeTrigger);
        },
        'events': {
            'click #btnSubmit': 'addRecord'
        },
        addRecord: function(){
            collection1.push(model1);
            var item = '<li>Name: ' +  model1.get('name') + '</li>';
            var app2 = new appView2({collection: collection1});
            $('#txtName').val('').focus();
        }
    });
    var view1 = new appView1({});


    var appView2 = Backbone.View.extend({
        el: '#container2',
        initialize: function(){
            this.render();
        },
        render: function(){
            var template = _.template($('#app2').html());
            this.$el.html(template);
            this.collection.each(function(model){
                var item = '<li>Name: ' + model.get('name') + '</li>';
                $('#infoList').append(item);
            });
        }
    });
    var view2 = new appView2({});

As of now, I have only been able to pass values using collection and id variables.

Are they reserved variables?

Can i use any other variable to pass data?

var app2 = new appView2({nameObj: nameObj});

this fails.


Solution

  • As per docs, Backbone view only acts upon model, collection, el, id, className, tagName, attributes and events properties of options object.

    However, you can pass any other data you want, the whole options object will be available as the first parameter of initialize callback.

    For example:

    var AppView = Backbone.View.extend({
      el: '#container2',
      initialize: function(options){
       // access your data here
        this.valuableInformation = options.valuableInformation;
        if(!options.doNotRender)
          this.render();
      },
      render: function(){
      }
    });
    
    new AppView({
      valuableInformation:"it's nothing",
      doNotRender: true
    });