CODEWITHSUNDEEP
ember.jshandlebars.js
WallMobile
WallMobile

Reputation: 1959

Refresh item in Ember.js each loop

I have an each loop in ember that works fine the first time displaying the data. Inside of it, there is an if statement and it either shows the image available, or it will show a button to upload an image. If I do upload a new image, I would like the item on the page to switch to showing the image, and the button would then be hidden.

The only way I have found to do this, is to remove the if statment, and using some bindattr properties on the items so that the are visible or hidden (though this forces me to make special fields on the models for view logic). I am wondering if there is some way to refresh the each loop or just the particular item in the loop?

ul.thumbnails
    {{#each item in view.content}}
    li.span5.thumbnail
      {{#if item.isPlaceholder}}
      .placeholder
        <span class="photo-category">{{item.category}}</span>
        <button class="btn" {{action "showCategoryFileUpload" item target="parentView"}}>Upload Photo</button>
      {{else}}
      <a {{action "showPhoto" item target="parentView"}} class="photo-link" href="#">
      <img {{bindAttr src="item.url"}} {{bindAttr class="item.islast"}} /><span class="photo-category">{{item.category}}</span>
      </a>
      {{/if}}
    {{/each}}

Upvotes: 0

Views: 586

Answers (1)

Mudassir Ali
Mudassir Ali

Reputation: 8041

Try Collection helper instead in order to persist the bindings of {{if}} helper, the problem being the if condition is only checked when the loop ran for the first time, the collection view is a ContainerView which creates a view with associated bindings for each item in the array.

You can also accomplish this using each helper by doing itemViewClassBinding if you are using the latest Ember but using collection is more elegant approach

{{#collection contentBinding="view.content"}}
  li.span5.thumbnail
  {{#if view.content.isPlaceholder}}
    .placeholder
    <span class="photo-category">{{view.content.category}}</span>
    <button class="btn" {{action "showCategoryFileUpload" item  target="view.parentView"}}>Upload Photo</button>
  {{else}}
    <a {{action "showPhoto" item target="view.parentView"}} class="photo-link" href="#">
      <img {{bindAttr src="view.content.url"}} {{bindAttr class="view.content.islast"}} />          
      <span class="photo-category">{{view.conetn.category}}</span>
    </a>
  {{/if}}  
{{/collection}}

Upvotes: 2

Related Questions