Ember.js: access properties in the "parent" controller when using the {{render}} helper

Question

I have the following setup:

| // IndexController contains array of search result objects
| IndexController  (ArrayController) 
|     //Contains a search result object with row data (array) and search metadata
|---> ResultController (ObjectController) 
|          // Contains just the row data which is rendered into a sortable table 
|--------> TableController (ArrayController)

IndexControllerretrieves a list of objects from the server when the user initiates a search. Each returned object has some search metadata and all row data.

Each object is visualized using an auxiliary element {{#each}}in the index template:

{{#each itemController="result"}}
    {{view App.ResultView}}
{{/each}}

ResultView displays metadata and then displays the actual table with a helper {{render}}, like this:

<h2>{{pieceofMetaData}}</h2>
{{render "table" rows}}  

( ), {{render}} TableController . , IndexController 3 , 3 TableControllers. TableController - ArrayController, , ArrayController . :

  <table>
      <thead>
          <tr>
              <th>First Name</th>
              <th>Last Name</th>
          </tr>
      </thead>
      <tbody>   
          {{#each}}  <!-- Each row of data is rendered here -->
              <tr>
                  <td>{{firstName}}</td>
                  <td>{{lastName}}</td>
              </tr>
          {{/each}}
      </tbody>
   </table>

, . ResultController TableController. ResultController , . , ResultController TableController.

needs: ['result'] "TableController", ResultController, .

jsbin , , .

http://emberjs.jsbin.com/paceqaki/7/edit

!

,

Answer 1

PersonTableComponent, . . , sortProperties, 'sortAscending', Ember.SortableMixin, , mixin, , ArrayProxy, .

<script type="text/x-handlebars" data-template-name="components/person-table">  
    <h3>{{header}} )</h3>
     <table>
      <thead>
          <tr>
             <th {{action 'toggleSortFirstName' }}>First Name</th>
             <th {{action 'toggleSortLastName'}}>Last Name</th>
          </tr>
      </thead>
      <tbody>   
          {{#each sortedPeople}}
              <tr>
                  <td>{{firstName}}</td>
                  <td>{{lastName}}</td>
              </tr>
          {{/each}}
      </tbody>
   </table>
</script>



<script type="text/x-handlebars" data-template-name="index">  
    {{#each controller}}
        {{person-table header=header people=rows}}
    {{/each}}
</script>

App.PersonTableComponent = Ember.Component.extend({
  sortProperty: 'lastName',
  sortAscending: true,


  sortedPeople: Em.computed(function(){

    // define your sorting functionality
    return this.get('people').sort( function(item) {
      return -1;
    });

  }).property('people.@each', 'sortProperty', 'sortAscending'),

  actions: {
    toggleSortFirstName: function() {


      var sortValue = !this.get('firstNameSortValue');

      // save current sort state
      this.set('fistNameSortValue', sortValue);
      this.setProperties({sortProperty: 'firstName',
                          sortAscending: sortValue});

    },
    toggleSortLastName: function() {

      var sortValue = !this.get('lastNameSortValue');

      // save current sort state
      this.set('lastNameSortValue', sortValue);
      this.setProperties({sortProperty: 'lastName',
                          sortAscending: sortValue});
    }
  }
});

EmberJS Component .