22183

backbone.js not picking up model context

Please see the following fiddle.

HTML

<script id="person" type="text/x-handlebars-template"> <div>Title : {{title}} </div> <div>First Name : {{firstname}}</div> <div>Last Name : {{lastname}}</div> </script> <div id="people"></div>

JS

(function ($) { var personTemplate= Handlebars.compile($("#person").html()); var Person= Backbone.Model.extend({ title: null, firstname : "", lastname : "" }); PersonView = Backbone.View.extend({ tagName: "div", template: personTemplate, render: function () { $(this.el).html(this.template(this.model)); return this; } }); $(document).ready(function () { var AppView = Backbone.View.extend({ initialize: function () { var passView = new PersonView ( { model: new Person({ title: "Mr", firstname : "John", lastname : "Smith"}) }); $('#people').append(passView.render().el.outerHTML); } }); var App = new AppView(); }); })(jQuery);

I've created a basic mode and view, but the parameters for the view are not being picked up by the template. If i set the value directly on the person model, it finds them. But not if i set them via a new instance of the mode (or even if I use the init methods to .set() them.

What am I doing wrong?

Answer1:

In order to get a object for use with your template you need to call your model's toJSON method.

For example

PersonView = Backbone.View.extend({ tagName: "div", template: personTemplate, render: function () { $(this.el).html(this.template(this.model.toJSON())); return this; } });

If you inspect one of your models in Firebug (or just output it to the console) you'll notice that there are a lot more attributes then just the ones you specified, and that the values you specify are actually contained under a property attributes, calling toJSON returns an object with the models "values" that you specified.

Recommend

  • backbone.js router doesn't work on IE6
  • Updating a LayoutView's Model
  • Property '$' of object # is not a function at _.extend._ensureElement
  • Javascript replace “variables” in HTML code faster
  • Ember source code hosting URL for handlebars?
  • Swift gives “self used before all stored procedures are initialized” error when building child nodes
  • Mockery and Laravel constructor injection
  • How to access recipient on sent messages page with mailboxer
  • Scala: Function returning an unknown type
  • LiveData is abstract android
  • Looking for good analogy/examples for monitor verses semaphore
  • Why use database factory in asp.net mvc?
  • IE11 throwing “SCRIPT1014: invalid character” where all other browsers work
  • Reading a file into a multidimensional array
  • How to remove a SwiftyJSON element?
  • RxJava debounce by arbitrary value
  • pyodbc doesn't report sql server error
  • NSScanner Loop Question
  • Display java JPanel in a JFrame
  • Sencha Touch 2.0 Controller refs attribute not working?
  • how to adjust image in a panel in Java swing?
  • Encrypt data by using a public key in c# and decrypt data by using a private key in php
  • Read text file and split every line in MSBuild
  • How to make a tree having multiple type of nodes and each node can have multiple child nodes in java
  • Weird JavaScript statement, what does it mean?
  • How to get icons for entities from eclipse?
  • Linker errors when using intrinsic function via function pointer
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Qt: Run a script BEFORE make
  • LevelDB C iterator
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • MATLAB: Piecewise function in curve fitting toolbox using fittype
  • JaxB to read class hierarchy
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • How can i traverse a binary tree from right to left in java?
  • How can I use `wmic` in a Windows PE script?