backbone.js - Passing data to underscore for rendering not working -

backbone.js - Passing data to underscore for rendering not working -

i trying render underscore template 1 below

div.col-md-12#english select(value="", class="form-control") alternative | select language preference script(type="text/template" id="english-pref") <% if (selected === "us") { %> option(value="us", selected) | united states of america <% } else %> <% if(selected === "us"){ %> option(value="uk", selected) | united kingdom of britain and northern republic of ireland <% } %>

here backbone view code

app.notesview = backbone.view.extend({ el: '#notes', events: { 'click #save': 'save', 'click #update': 'update' }, template1: _.template($('#about').html()), template2: _.template($('#facts').html()), template3: _.template($('#english').html()), initialize: function() { app.notesmodel = new app.notesmodel({}); this.model = app.notesmodel; app.email = $('#data-user').text(); app.username = $('#data-username').text(); app.notesmodel.fetch({ data: { email: app.email, username: app.username }, type: 'post', processdata: true, success: function(data) { $('#save').remove(); }, complete: function(xhr, textstatus) { //console.log(textstatus); }, error: function() { $('#about-container .note-editable').html(''); $('#note-container .note-editable').html(''); $('#update').remove(); } }); this.model.bind('sync', this.render, this); }, render: function() { this.$('#aboutparent').html(this.template1, this); this.$('#noteparent').html(this.template2, this); app.initializeeditor(); $('#about-container .note-editable').html(this.model.attributes.about); $('#note-container .note-editable').html(this.model.attributes.editornote); if(this.model.attributes.english === null || this.model.attributes.english === undefined || this.model.attributes.english === '') { /*var info = '<option value="us">united states</option><option value="uk">united kingdom</option>';*/ var info = {"selected": "us"}; this.$('#noteparent').html(this.template3,data); }else { var info = {"selected": "uk"}; this.$('#noteparent').html(this.template3,data); } } });

i have looked @ couple of tutorials , confused each 1 has own way of getting things done.the problem facing template not rendered says selected undefined. passing object view @ ?

also there pattern can utilize rule of thumb rendering templates.

this.template3 (and template1 , template2 matter) function phone call info argument html back. in general:

var tmpl = _.template(template_source_text); var html = tmpl(template_data);

you're passing template function jquery's html:

this.$('#noteparent').html(this.template3,data);

when hand html function, calls function not arguments template function expects:

.html( function ) type: function( integer index, htmlstring oldhtml ) => htmlstring

a function returning html content set. receives index position of element in set , old html value arguments.

what you're doing same saying:

this.$('#noteparent').html(this.template3(some_index, some_html));

you want say:

this.$('#noteparent').html(this.template3(data));

so stuff in data passed template function.

backbone.js underscore.js underscore.js-templating