Backbone and Mustache bind to multiple JSON objects

Question

Is it possible to bind multiple JSON objects in Mustache? I have a little app where I use backbone to extract data from a restful api.

I'm essentially getting a list of employees, and then all of their subordinates. I am passing the model to mustache and binding like this:

render: function(){
    //debugger;
    var model = {
      manager: this.model.toJSON(),
      subordinates: this.model.reports.toJSON()
}

    console.log('render',this.model.toJSON()); // show the employee and the list of subordinates
     this.el.innerHTML = Mustache.to_html(this.template, { employee_detail: model });
  }

My template looks like below. It works fine for binding and displaying the manager variables, but the subordinates variables don't show up. I want to display an employee's details and then list all of their subordinates.

{{#employee_detail}}
<h3>{{manager.firstName}} {{manager.lastName}}</h3>
<h4>{{manager.title}}</h4>
 <table class="table table-striped">
            {{#manager.managerId}}
                <tr>
                    <td>Manager:</td>
                    <td><i class="icon-user"></i> <a href='#employees/{{manager.managerId}}'>{{manager.managerName}}</a></td>
                </tr>
            {{/manager.managerId}}
            <tr>
                <td>Office Phone:</td>
                <td><i class="icon-home"></i> {{manager.officePhone}}</td>
            </tr>
            <tr>
                <td>Cell Phone:</td>
                <td><i class="icon-headphones"></i> {{manager.cellPhone}}</td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><i class="icon-envelope"></i> <a href="mailto:{{manager.email}}">{{manager.email}}</a></td>
            </tr>
            <tr>
                <td>Twitter:</td>
                <td><i class="icon-retweet"></i> <a href="">{{manager.twitterId}}</a></td>
            </tr>
        </table>
         <table>
            <tr>
                <td>Subordinates:</td>
                <td><i class="icon-user"></i> <a href='#employees/{{subordinates.id}}'>{{subordinates.fullName}}</a>
                </td>
            </tr>
         </table>   
{{/employee_detail}}

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

subordinates suggests me you're working with array. If that's the case I believe you should iterate over its elements and display each one separately. If I am right -you are getting 2x undefined when calling {{subordinates.id}}'>{{subordinates.fullName}} because arrays don't have such properties.

more info about itarations over arrays in mustache you can find in this topic: Mustache.js: Iterate over a list received via json

edited May 23 '17 at 11:52

Community

1
1

answered May 21 '16 at 15:27

djaszczurowski

4,385
1
18
28

Thanks. It is actually not an array. It is a JSON object. I essentially have two models (backbone) in my object. So it is an object called model which has two nested objects, one being manager and the second being subordinates. The relationship is one manager and 0 to many subordinates. – mo_maat May 21 '16 at 17:54

Backbone and Mustache bind to multiple JSON objects

1 Answers1