Question

Edit: Problem was with my own local settings and the way I was including the views in my application. Once I fixed those issues, the problem was resolves. The code here is actually correct. The answer Chrixian provided also work.

I am stuck on something that seems rather simple. I want to access some computed properties of my view constructed inside an each loop in handlebars.

<div class='build-buttons-wrapper'>
  <button class="list-builds-button" {{action "toggleBuildsList" target="view"}} ></button>
  <button class="build-button" {{action "buildApp" on="click" target="view"}} >Build</button>
</div>
<div class='builds-list'>
  <h2 class="build-title">Latest builds</h2>
  <ul class="builds-list">
  {{#each content}}
    {{#view Jimux.BuildView buildBinding="this"}}
      <span class="build-date">{{createdAt}}</span>
      <a {{bindAttr href="srcArchive"}} class="download-button source">Source</a>

      {{! *here are different ways I have tried to access "finished" property* }}
      {{log build.view.finished}}
      {{log view.finished}}
      {{log finished}}
      {{log this.finished}}
      {{log build.finished}}

      {{#if build.finished}}
        <div class="build-progressbar"></div>
      {{else}}
        <div class="build-progressbar"><div class="build-percent" style="width:{{unbound percent}}%"></div></div>
      {{/if}}
    {{/view}}
  {{/each}}
  </ul>
</div>

Here is the BuildsView which is using this template:

  Jimux.BuildsView = Em.View.extend({
  templateName: 'builds'
  listVisible: false
  classNames: ['builds-view']
  buildApp: (view, event, ctx) ->
    @get('controller').newBuild()
  ,
  hideList: ->
    @set 'listVisible', false
    this.$(".builds-list").hide("slide", {direction: "up"}, 300)
  ,
  showList: ->
    @set 'listVisible', true
    this.$(".builds-list").show("slide", {direction: "up"}, 300)
  ,
  toggleBuildsList: (view, event, ctx) ->
    if @get 'listVisible' then @hideList() else @showList()
  ,
  didInsertElement: ->
    @hideList() if not @get 'listVisible'

})

And here is the BuildView which is created inside the {{#each}} iterator in the template above.

Jimux.BuildView = Ember.View.extend(
  tagName: 'div',
  classNames: ['build-item'],
  #testBinding: true,
  sample: true,
  finished: ( ->
    return true
    #return (@get 'percent') == 100
  ).property('percent')
)

Everything above works as expected. For example I can access percent property of each child view using {{percent}}. But if I define my own properties inside the Jimux.BuildView as show above, I cant seem to find a way to access them within the handlebars {{#each}} iterator. You can see the different ways I have tried inside the handlebars code with {{log}} statements, all those print undefined in the console. What am I missing here?

Answer 1

I’m assuming the percent property you are referring to is a property of each “content” object you are looping over– if that’s the case making finished look like this:

finished: (->
    return @get('context.percent') is 100
).property('context.percent')

You should be able to simply use {{finished}} within the {{#view Jimux.BuildView}} .. {{/view}} block