backbone.js - Underscore.js Template Issue - Cannot call method 'replace' of null -
backbone.js - Underscore.js Template Issue - Cannot call method 'replace' of null -
i have been looking on , found alot of answers none seem work.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> shopping cart </title> <link rel="stylesheet" href="lib/style.css" type="text/css"> </head> <body> <script id="rtemp" type="text/x-underscore-template""> <span><%= title %></span> </script> <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/underscore.js" type="text/javascript"></script> <script src="lib/backbone.js" type="text/javascript"></script> <script src="lib/script.js" type="text/javascript"></script> </body> <script> var photo = backbone.model.extend({ initialize: function(){ console.log('this model has been initialized'); this.bind("change:title", function(){ var title = this.get("title"); console.log("my title has been changed to.. " + title); var pv = new photoview(); pv.render(); }); }, settitle: function(newtitle){ this.set({ title: newtitle }); }, setlocation: function(newloc) { this.set({location:newloc}); } }); var photoview = backbone.view.extend ({ el: $('body'), render: function(event) { var name = myphoto.get('title'); console.info(name); var template = _.template($('#rtemp').html(), {title:name}); console.info(this.model); $(this.el).html(template); homecoming this; } }); </script> </html> first;
create new instance of method
var newphoto = new photo(); newphoto.settitle('fishing'); this work fine, load body via template. if again,
newphoto.settitle('sailing'); i error - "cannot phone call method 'replace' of null"
no line error believe at
var template = _.template($('#rtemp').html(), {title:name});
you have few things wrong here.
your template has double " in type attribute, should be:
<script id="rtemp" type="text/x-underscore-template"> your view's render referencing myphoto when should this.model:
var name = this.model.get('title'); and main problem view uses <body> this.el , template within <body>.
you replace content of <body> when render view:
$(this.el).html(template); so after first render call, there no more #rtemp. then, on next render call, seek this:
var template = _.template($('#rtemp').html(), ...); but since #rtemp isn't in dom anymore, falls apart.
if grab template immediately:
var photoview = backbone.view.extend({ el: $('body'), template: _.template($('#rtemp').html()), //... }); and utilize this.template() in render:
render: function(event) { //... var template = this.template({ title: name }); //... } you'll have improve luck. will, of course, need create sure define view within document-ready handler approach or #rtemp might not available when define view.
demo: http://jsfiddle.net/ambiguous/dwgsm/
that said, construction of application rather bizarre. have model listens , model creates , renders view when changes. model listening fine in have views listening models , view re-render (or parts of itself) model changes.
your model should more this:
var photo = backbone.model.extend({ settitle: function(newtitle) { this.set({ title: newtitle }); }, setlocation: function(newloc) { this.set({ location: newloc }); } }); and view this:
var photoview = backbone.view.extend({ el: $('body'), template: _.template($('#rtemp').html()), initialize: function() { _.bindall(this, 'render'); this.model.on('change:title', this.render); }, render: function(event) { this.$el.html( this.template(this.model.tojson()) ); homecoming this; } }); the _.bindall in initialize ensures this.render called right this; initialize binds event can respond changes in model. view knows cares responsible dealing changes in model. , in render, phone call tojson info template. also, newer versions of backbone include cached version of $(this.el) in view this.$el don't have $(this.el) anymore.
then you'd crank things this:
var newphoto = new photo(); var viewphoto = new photoview({ model: newphoto }); newphoto.settitle('fishing'); newphoto.settitle('sailing'); you tell view model utilize specifying model alternative when creating view.
you might want move template <script> out of <body>.
new , improved demo: http://jsfiddle.net/ambiguous/kytw7/
backbone.js underscore.js
Comments
Post a Comment