Best Practice for changing the model of a Marionette.ItemView -


in application have collectionview itemview next (they're both visible @ same time). when item clicked in list, itemview displays details.

the easy solution trigger

biglayout.itemdetailsregion.show(new itemdetailsview({    model: modelofclickeditem }); 

but makes itemview instance rendered closed , garbage-collected while new instance of same class being created , rendered in same place. me , team smells bad practice (deleting , re-creating view seems useless overhead), right?

at time being, added changemodel(model) method itemview class that

  • unbinds events previous model
  • assigns new model view
  • re-renders view
  • binds new events model

but not satisfied (many times switching model more complex , solution not scalable).

is there call "best practice" kind of need? standard way (as described above) practice?

honestly don see why first approach bad. it's same you're doing manually using changemodel method.

i suppose 'expensive' action re-render view (dom manipulation) you'll have regardless.

another method can think of (using http://nytimes.github.io/backbone.stickit/):

// create stickit marionette itemview var stickititemview = backbone.marionette.itemview.extend({     bindings: {},     render: function(){         // invoke original render function         var args = array.prototype.slice.apply(arguments);         var result = marionette.itemview.prototype.render.apply(this, args);          // apply stickit         this.stickit();          // return render result         return result;     } });  /* setup temp model in itemview.  * several ways this, either define attributes again or   * clone existing model example. in case assume want display   * data model. if want modify you'll have keep reference.  * see: http://stackoverflow.com/questions/17517028/how-to-clone-models-in-backbone /* var viewinstance = new stickititemview({     model: realmodel.clone(),     template: sometemplate,     bindings: {         '.some-element': 'attribute1',         '.another-element': 'attribute2'     } });  // show view someregion.show(viewinstance);  // use model update temp model's attributes.  viewinstance.model.set(anotherrealmodel.tojson());     

if i'm correct quite scalable, updates dom supposedly faster (test it!) , takes care of data-binding.


Comments

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -