Ember: Access controller property from within an each helper

1
votes

I have a property on my controller, we'll call it showTheStuff, and my template has an {{#each}} helper in it. For now, I'm just setting the property explicitly.

Within that list, I want to conditionally render or not render some markup depending on the value of showTheStuff, but it doesn't work if I'm using the {{#unless}} conditional.

http://emberjs.jsbin.com/jarapabela/1/

How do I get this to work? In my code, it won't work with {{#unless}}, but if I toggle the property and use {{#if}}, it does work. Has anyone else experienced this?

I'm using Ember 1.6.

controller:

export default Ember.ArrayController.extend({
  hideDeleteButton: true,
  actions: {
    deleteComment: function(comment) {
      comment.destroyRecord();
      this.removeObject(comment);
    }
  }
});

template: The template is a modal component rendered within another template. The {{#link-to}} that opens it passes in by passing an array of comments. The property takes effect outside of the {{#each}}, but inside it must be undefined, because even trying to output it in the first cell, nothing shows up when rendered.

  <table class="table table-striped table-condensed">
    <thead>
      <tr>
        <th>Comments</th>
        {{#unless hideDeleteButton}}
          <th></th>
        {{/unless}}
      </tr>
    </thead>
    <tbody>
      {{#each}}
        <tr>
          <td>
            {{hideDeleteButton}}
            <br>
            {{comment}}
          </td>
          <td>
            {{createdByResource}}{{hideDeleteButton}}
          </td>

          {{#unless hideDeleteButton}}
            <td class="text-center">
              {{confirm-delete-button action="deleteComment" param=this}}
            </td>
          {{/unless}}
        </tr>
      {{/each}}
    </tbody>
  </table>
2
ember.jsconditionalhandlebars.js
seems to work with unless. Think of unless like a not. Can you try and explain a bit more what you are looking for? - blackmind
It works in the bin, I can't figure out why in the world it won't work in my code, which is pretty much as simple. If I use If helpers, everything works. If I just change the "if" to "unless" and then switch the parity of my property, suddenly it doesn't work. I thought maybe there was some bug with unless inside an each helper or something. - redOctober13
doesn't look like an ember bug. i changed to v1.6 and it still functioned (it was using 1.8). can you add the code from your program to see if any difference - blackmind
If you output your property above the unless does it show up correctly? I'd suspect context, but just guessing - Kingpin2k

2 Answers

2
votes

@Kingpin2k led me in the right direction, and the jsbin I guess didn't fully match my actual code. The problem is that my hideDeleteButton property is actually not known within the each, since it's iterating over the model that was passed in.

However, if I specify controller in referencing the property, it works!

{{#unless controller.hideDeleteButton}}
  <td class="text-center col-md-1">
    {confirm-delete-button action="deleteComment" param=this}}
  </td>
{{/unless}}
1
votes

Make sure you provide some context to your {{#each}} block.

Example: {{#each object in model}} or for the new syntax: {{#each model as |object|}}

This should allow you to reference hideDeleteButton without using "controller.hideDeleteButton"

I'm assuming hideDeleteButton is a property on your controller and the rest are properties on your model:

{{#each model as |object|}}
  <tr>
    <td>
      {{hideDeleteButton}}
      <br>
      {{object.comment}}
    </td>
    <td>
      {{object.createdByResource}}{{hideDeleteButton}}
    </td>

    {{#unless hideDeleteButton}}
      <td class="text-center">
        {{confirm-delete-button action="deleteComment" param=object}}
      </td>
    {{/unless}}
  </tr>
{{/each}}