javascript - Dynamically set child View $el and have Backbone events fire -

javascript - Dynamically set child View $el and have Backbone events fire -

i have parent view (and associated model), several children views same associated model. parent view defined statically html. these events working fine.

the children views created dynamically, , different, have similar initial structure. #id s different each other (using view id number) can know 1 interacted user. have tried next reading around:

adding el declaration when create view (towards end of js) statically defining it, trying update it. using _.ensureelement() setting el in init()

but can't seem children views on fiddle.

fiddle

js: parent

//the view our measure parentmodule.view = backbone.view.extend({ // //this 1 static, can set directly, no problem, events working // el: $('#measure-container'), events: { 'click .test': 'test' }, test: function(){ alert('test'); }, initialize: function() { this.template = _.template($('#instrument-template').html()); }, render: function(){ $(this.el).append(this.template(this.model.tojson())); homecoming this; } }); homecoming parentmodule; });

js: kid

// kid views dynamic, how set id's dynamicall , still click events fire? // childmodule.view = backbone.view.extend({ // // set el here statically override? // events: { 'click .remove-rep' : 'removerepresentation', 'click .toggle-rep' : 'togglereptype', 'click .salert': 'showalert' }, initialize: function(options) { // //do set el here using ensure_element? // this.model=options.model; }, render: function(){ // // set here when renders? // this.template = _.template($('#rep-template').html()); $('#measure-rep-container').append(this.template()); homecoming this; }, showalert: function() { alert("this alert!"); } });

js: instantiation

define( "app", ["jquery", "backbone", "parentmodule", "childmodule"], function($, backbone, parentmodule, childmodule) { var app = {}; app.model = new parentmodule.model({ name: "snare", numofbeats: 4 }); app.view = new parentmodule.view({ model: app.model }); app.view.render(); app.firstrepchildmodel = new childmodule.model({ id: 1, type: 'circle', parentmodel: app.model }); // // add together el parameter when creating view? // app.firstrepchildview = new childmodule.view({ el:'#rep'+app.firstrepchildmodel.get('id'), model: app.firstrepchildmodel }); app.firstrepchildview.render(); app.secondrepchildmodel = new childmodule.model({ id: 2, type: 'line', parentmodel: app.model }); // // add together el parameter when creating view? // app.secondrepchildview = new childmodule.view({ el:'#rep'+app.secondrepchildmodel.id, model: app.secondrepchildmodel }); app.secondrepchildview.render(); homecoming app; });

html:

<h3>measure view</h3> <div id="measure-container"> </div> <!-- templates --> <script type="text/template" id="instrument-template"> <div class="instrument"> instrument. name <%=name%>. <br/> here children repviews: <br/> <div id="measure-rep-container"> <div class="btn btn-primary test">add rep</div> </div> </div> </script> <script type="text/template" id="rep-template"> <div class="rep" id="rep<%=this.model.id%>"> repview <br/> id 'rep<%=this.model.id%>' <br/> el '<%=this.$el.selector%>'<br/> type '<%=this.model.type%>' <br/> have many beats '<%=this.model.numofbeats%>' <br/> <div class="beatcontainer"></div> <div class="btn btn-danger remove-rep" id="">remove rep</div> <div class="btn btn-primary toggle-rep" id="">toggle rep type</div> <div class="btn salert">show alert</div> </div> </script>

every view has associated el, whether set straight or not, if don't set it's el empty div.

in code aren't modifying kid view's el or attaching dom.

try following

render: function(){ this.template = _.template($('#rep-template').html()); //this sets content of el, still isn't attached dom this.$el.html(this.template()); $('#measure-rep-container').append(this.el); homecoming this; },

updated fiddle

as separate point if going reusing same template multiple times might want compile once, example

childmodule.view = backbone.view.extend({ events: { 'click .remove-rep' : 'removerepresentation', 'click .toggle-rep' : 'togglereptype', 'click .salert': 'showalert' }, //get's called 1 time regardless of how many kid views have template: _.template($('#rep-template').html()), render: function(){ this.$el.html(this.template()); $('#measure-rep-container').append(this.el); homecoming this; },

javascript backbone.js backbone-views backbone-events