Manual Nested Objects

Question

I am using backbone.js with nested models. The idea is that it contains all the attributes of the author, as well as for reusing the author’s model in both posts and comments. At least theoretically this makes sense, I think.

However, setting things up this way, I ran into confusion on how to retrieve different values ​​using Handlebars. Pens do not like to transfer objects from what I read. I can easily get the status in {{#each}} using {{status}} , but naturally {{author.name}} will not work.

I looked at using the helper, however, as you can see, I have nested comments inside, it will have a different author, nested inside. I do not believe that assistants inside assistants will work.

This is an example of an object retrieved from the Chrome console.

 Object {items: Array[2]} +items: Array[2] +0: Object +author: child _changing: false _pending: false _previousAttributes: Object +attributes: Object name: "Amy Pond" profileImage: "Amy.jpg" __proto__: Object changed: Object cid: "c0" __proto__: Surrogate comments: child id: "50f5f5d4014e045f000001" status: "1- This is a sample message." __proto__: Object +1: Object author: child comments: child id: "50f5f5d4014e045f000002" status: "2- This is another sample message." __proto__: Object length: 2 __proto__: Array[0] __proto__: Object 

Am I wrong in my organization or is there a better way to handle multidimensional data? Or is there a good way for Handlebars to get to each of the values?

If there is a more powerful template engine, I open the options.

Answer 1

The problem seems to be that you put the Backbone model directly in your template, but first you have to convert it to a JSON object using model.toJSON() . Or are you trying to access author.attributes.name .

From docs :

Handlebars also supports nested paths, which allows you to search for properties nested below the current context.

 <div class="entry"> <h1>{{title}}</h1> <h2>By {{author.name}}</h2> <div class="body"> {{body}} </div> </div> 

This template works with this context.

 var context = { title: "My First Blog Post!", author: { id: 47, name: "Yehuda Katz" }, body: "My first post. Wheeeee!" };