backbone.js - Event handling between views -


ok have layout 1 in pic:

layout

the table in upper part of screen made by:

messagelistview

define(['backbone','collections/messages','views/message'], function(backbone, messagecollection, messageview) {     var messagelistview = backbone.view.extend({         el: '#messagescontainer',          initialize: function() {              this.collection = new messagecollection();             this.collection.fetch({reset:true});             this.listento( this.collection, 'reset', this.render );              this.table = this.$el.find("table tbody");             this.render();         },         render: function() {             this.collection.each( function(message, index) {                                 this.rendermessage(message, index);             }, this);         },         rendermessage: function(message, index) {             var view = new messageview({                 model:message,                 classname: (index % 2 == 0) ? "even" : "odd"                 });             this.table.append( view.render().el );         }     });     return messagelistview; }); 

messageview

define(['backbone','models/message'], function(backbone, messagecollection, messageview) {     var messageview = backbone.view.extend({         template: _.template( $("#messagetemplate").html() ),          render: function() {             this.setelement( this.template(this.model.tojson()) );                       return this;         },         events:{             'click':'select'         },         select: function() {            // here?         }     });     return messageview; }); 

appview

define(['backbone','views/messages'], function(backbone, messagelist) {     var app = backbone.view.extend({         initialize: function() {             new messagelist();          }     });     return app; }); 

i add new view (maybe "previewview") in lower part of screen.

i want make happen inside "previewview" when user clicks row.

for example, interesting display other model's attributes (details, e.g.) inside previewview.

what best practice?

  • holding reference previewview inside each messageview ?
  • triggering events inside select method, , listening them using on() inside preview view.
  • using transient "selected" attribute in model, , make previewview listen collection "change" events?

thank you, if need more details tell me please, i'll edit question.

not sure best practice found solution trivial implement. created global messaging object, bus, whatever:

window.app = {}; window.app.vent = _.extend({}, backbone.events); 

you have register "triggerable" functions of previewview on created event bus (according example, should in previewview):

initialize: function () {     app.vent.on('previewview.show', this.show, this); } 

now should able trigger of registered events anywhere within application calling: app.vent.trigger. example when user click on row have similar:

app.vent.trigger('previewview.show'); 

in case if have send , object along triggered event use:

app.vent.trigger('previewview.show', data); 

Comments