ember controller for rendered template

Question

I have a collection of foos, and each foo has its own collection of bars. I want to be able to display a selected foo using routes, but then the foo's bars are listed as part of the display.

All that is straight forward except that each bar may contain an attribute that means I want to apply different styles to it. So, I am using a render handlebars helper inside an each , like so -

<script type="text/x-handlebars" id="foo">
    <div>{{name}}</div>
    <div>
        <table>
            {{#each bar in bars}}
                {{render bar bar}}
            {{/each}}
        </table>
    </div>
</script>

and the bar template looks like this -

<script type="text/x-handlebars" data-template-name="bar">
    <tr><td>
        <div {{bind-attr class="bar.bold:bold"}}>{{bar.name}}</div>
    </td></tr>
</script>

The thing is that I can't figure out how to define the controller. The above just works if the model contains bars with a bold property but what if that's not the case and I need to calculate the property?

I tried variations on this -

App.BarController = Ember.ObjectController.extend({
isBold: function(){
    return this.get('bold');
}.property('isBold'),});

(modifying the bind-attr helper accordingly), and I put a breakpoint on the return. It is never hit.

I have a jsfiddle here (http://jsfiddle.net/martinp999/ZbjH9/7/). Any advice would be appreciated. Thanks

intuitivepixel intuitivepixel · Accepted Answer · 2013-10-13T09:22:36

To hold state on a per item basis using an itemController is the right approach.

But to get your BarController being picked up and used and therefore your computed property getting invoked you have to set the itemController property on your {{each}} helper to do so:

<script type="text/x-handlebars" id="foo">
  <div>{{name}}</div>
  <div>
    <table>
        {{#each bar in bars itemController="bar"}}
            {{render bar bar}}
        {{/each}}
    </table>
  </div>
</script>

See here your modified and working jsfiddle

Hope it helps.

ember controller for rendered template

2 Answers