backbone form : how to render form using a custom template -
since backbone form extends backbone view, guess using custom template sould done same way.
first : insert template script type="text/html" element in header
<head> [ ... ] <script type="text/html" id="mytemplate"> <h1>this template view</h1> </script> </head> then set view's template attribute using id of template
var myview= new backbone.view.extend({ template: '#mytemplate', [...] }); for backbone form, template doesn't work :
<head> [...] <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/underscore.js"></script> <script type="text/javascript" src="scripts/backbone.js"></script> <script type="text/javascript" src="scripts/backbone-forms.js"></script> <script type="text/html" id="mytemplate"> <h2>this custom form template!</h2> <form><%= fieldsets %></form> </script> </head> <body> <div id="myform"></div> <script type="text/javascript"> $(document).ready(function(){ mymodel = backbone.model.extend({ schema: { id : {type : "number", validators : ["required"]}, first_name: {type : "text", validators : ["required"]}, last_name: {type : "text", validators : ["required"]}, screen_name: {type : "text"} } }); var mymodel = new mymodel(); var myform = new backbone.form({ template: '#mytemplate', model : mymodel }); $('#myform').html(myform.render().el); }); </script> </body> </html> this code outputs following error :
uncaught typeerror: property 'template' of object [object object] not function then try using underscore when setting template attribute. not work either
var myform = new backbone.form({ template: _.template($('#mytemplate')), model : mymodel }); also different error above code :
uncaught typeerror: object [object object] has no method 'replace' i'm new backbone / backbone form. tell me wrong?
thanks!
try
template: function(attrs) { return _.template($('#mytemplate').html(), attrs)}, use template this:
$('body').append(this.template({fieldsets: 'fieldsets'})); see working example http://jsbin.com/uzutes/2/
Comments
Post a Comment