javascript - Edit List using Backbone.js/Marionette -

i'll start off i'm new these 2 frameworks i'm excited i've learned far them. big improvement way i've been doing things.

i want display collection of items (trip itineraries) in table. want display couple of itinerary fields in table because there many fields. when edit/add item, display form edit fields in different region or in modal , when save list/table updated. i'm unsure of best way structure , hoping point me in right direction or better example of similar. searches far have came short. seems should use composite view list how best pass selected item off edited i'm kinda stuck at. pointers appreciated.

i'd use compositeview table, , itemview form. incomplete, should started. actually... kind of got carried away.

what follows ideas basic structure & flow. implementation details, including templates, i'll leave you.

the table/row views:

// each row in table var rowview = backbone.marionette.itemview.extend({   tagname: "tr" });  // table tag itself, or container holds table. // want use compositeview rather collectionview can // render containing template (the table tag, headers), , also, works // if have actual collection model (itinerarylist, etc). var tableview = backbone.marionette.compositeview.extend({   itemview: rowview,   collectionevents: {     "change": "render"   } }); 

the form view:

// simple form wrapper pulls default values // model.  there plugins in space // forms in backbone (e.g. backbone-forms), may or may not // worth bloat, or might tricky work marionette. var formview = backbone.marionette.itemview.extend({   events: {     "submit form": "onformsubmit"   },    data: function () {     // here you'd need extract form data, using `serializearray`     // or such, or form plugin.     return {};   },    // incomplete.  you'd need handle errors,    // perhaps validation, etc.  want bind    // collection:change or close formview on success.   //   // re-rendering table should handled collection change    // event handler on table view   onformsubmit: function (e) {     e.preventdefault();      if (this.model.isnew()) {       this.collection.create(this.data());     } else {       this.model.save(this.data());     }   } }); 

somewhere in load process you'd instantiate collection , show it:

// first off, somewhere on page load you'd instantiate , fetch // collection, , kick off tableview var itineraries = new itineraries(); itineraries.fetch();  // simplicity i'm assuming app has 2 regions, form , table,  // you'll want change this. app.table.show(new tableview({collection: itineraries})); 

making routes edit , new itinerary links makes sense, if form in modal might want bind button clicks instead. either way, you'd open form this:

// in router (/itineraries/edit/:id) or click handler... function edititinerary(id) {   var itinerary = itineraries.get(id);   // show view, that.  if you're using typical    // marionette region pattern might   app.form.show(new formview({     collection: itineraries,      model: itinerary   }); }  // once again, route (/itineraries/new), or click handler... function newitinerary() {   app.form.show(new formview({     collection: itineraries,      model: new itinerary()   })); }