javascript - How to render and save dynamic properties of a Backbone Model? -

i totally lost on how implement solution following problem:

i have backbone view populated properties backbone model. in view, attributes displayed , 1 of attributes, user needs able add or modify existing ones. best suited array of properties within backbone model (i think).

i have added test case in js fiddle here

as can see in fiddle, dog's favorite_snacks can added user, have been struggling on how write code parse , render in upon instantiating view , save them mysql database successfully.

i appreciate on this, i've been banging head against desk weekend trying figure out.

it better idea make sure views , models behave independently , decoupled code can managed @ later time.

so in case each pet can have 1 or many favorite snacks. expecting collection of snacks here , not single snack model.

so better create separate snacks collection , snack model. maintain separate view snacklistitem , iterate on list of snackcollection , render view each item..

so create separate templates both of them

<div id="foo"></div> <script type="text/template" id="pet-view-template">     <p> <span><b> dog name: </b> </span> <%= name %> </p>         <p> <span><b> dog color: </b></span> <%= color %> </p>      <h4> favorite snacks </h4>     <ul class="snacks-list">     </ul>     snack name: <input type="text" class="snack-name" />      cost : <input type="text" class="snack-cost" />         <button class="add-snack">add snack</button > </script>  <script type="text/template" id="snack-view-template">     <b>snack name:</b> <span> <%=favorite_snacks %> </span> ::     <b>cost: </b><span> <%= favorite_snack_cost %> </span>         <b class="toggle-change"> change </b>         <span class="modify-fields hide">              <b class="modify">snack name:</b> <input type="text" class="modify-name" data-key="favorite_snacks" />               <b class="modify">snack cost:</b> <input type="text" class="modify-cost" data-key="favorite_snack_cost" />             </span> </script> 

i have created separate view , models snacks collection. this can still optimized.

javascript

// create dog model var dog = backbone.model.extend({     defaults: {         name: 'new dog',         color: 'color'     } });  // create collection of dogs var dogs = backbone.collection.extend({     model: dog });  // create  model snacks var snack = backbone.model.extend({     defaults: {         favorite_snacks: 'bacon',         favorite_snack_cost: '52'     } });  // create collection of snacks var snacks = backbone.collection.extend({     model: snack });  // define model dog  var dog = new dog({     name: "spot",     color: "white" });  // create view snack item var snackitemview = backbone.view.extend({     tagname : 'li',     classname: 'snacks',     template: _.template($('#snack-view-template').html()),     initialize: function() {         // need bind save context of view         _.bind('togglechange', this);         // need listen model change event , render view again          // new data has reflected         this.listento(this.model, 'change' , this.render);     },         // assign events fields inside snacks view     events : {         'click .toggle-change' : 'togglechange',         'change input'         : 'modifydata'     },     togglechange: function() {         var $change = $('.modify-fields', this.$el);         $change.hasclass('hide') ? $change.removeclass('hide') : $change.addclass('hide');     },     // captue data inputs , trigger change event on model     modifydata: function(e) {         var value = $(e.currenttarget).val(),             key  = $(e.currenttarget).data('key');          this.model.set(key,value);     },     render: function () {         this.$el.html(this.template(this.model.tojson()));         return this;     } });  var petview = backbone.view.extend({     el: '#foo',     template: _.template($('#pet-view-template').html()),     initialize: function () {         this.collection = (this.collection && this.collection instanceof backbone.collection) || new snacks(snack);     },     events: {         'click .add-snack' : 'addsnack'     },     addsnack: function () {         // render new snack item         var newsnack = new snack({             favorite_snacks: $('.snack-name', this.$el).val(),             favorite_snack_cost: $('.snack-cost', this.$el).val()         });         this.rendersnackview(newsnack);         // clear inputs         $('input', this.$el).val('');     },     // render each snack view     rendersnackview: function (snack) {         var snackview = new snackitemview({             model: snack         });         $('.snacks-list', this.$el).append(snackview.el);         snackview.render();     },     render: function () {         var thisview = this;         // append petview         this.$el.html(this.template(this.model.tojson()));         // iterate on each snack collection of pet , render item         _.each(this.collection.models, function (snack) {             thisview.rendersnackview(snack);         });         return this;     } });    var petview = new petview({     model: dog }); petview.render(); 

check working fiddle

i have used comments explain of code. tough learn backbone started working , know trouble went thru . once used it simple yet powerful.. hope helps :)

but when try build application , need destroy views , events not being used in order reduce memory leaks.