CODEWITHSUNDEEP
javascriptember.js
jlommori
jlommori

Reputation: 171

Ember.js template not iterating over {{#each}}

I have an Ember.js handlebars template running an {{#each}} loop to iterate over a returned store data. There is only one record in the store, so I would expect this code to be executed 1 time. However, it is not executing at all and I can't seem to figure out why. Here is the .hbs code:

{{#each model.framework as |framework|}} 
  {{#paper-item noink=true}}
    <p class="question">
      {{paper-input label="Question" required=true value=detail}}
    </p>
    <p class="option">
      {{#paper-radio value="text" selected=type}}Text{{/paper-radio}} 
      {{#paper-radio value="radio" selected=type}}Options{{/paper-radio}} 

      {{#paper-button action=(action "newQuestion" framework.id) raised=true}}Add Question{{/paper-button}}
    </p>
  {{/paper-item}} 
{{/each}}

This {{#each}} loop should be rendering data from this query on my store (from my routes.js file for this page):

model(params) {
  var id = params.framework_id;
  return Ember.RSVP.hash({
    question: this.store.query('question', {orderBy: 'framework', equalTo: id}),
    framework: this.store.find('framework', id)
  })
}

And I know the routing and querying of the store are working correctly because the framework I'm trying to iterate on is in the Data store via Ember inspector:

Ember.js Inspector Data

There are other {{#each}} loops on the page (for the "question" store) working without issue. Any thoughts are appreciated.

Upvotes: 1

Views: 139

Answers (1)

nem035
nem035

Reputation: 35491

model.framework is a single object that you retrieve from your backend using store.find:

return Ember.RSVP.hash({
  question: this.store.query('question', {orderBy: 'framework', equalTo: id}),
  framework: this.store.find('framework', id) // <-- This returns an object
})

However, as Ember Docs explain:

The {{#each}} helper loops over elements in a collection.

Which means you cannot loop over a single object because it is not a collection. You need to remove the {{each}} helper and use model.framework instead of framework:

{{#paper-item noink=true}}
  <p class="question">
    {{paper-input label="Question" required=true value=detail}}
  </p>
  <p class="option">
    {{#paper-radio value="text" selected=type}}Text{{/paper-radio}}
    {{#paper-radio value="radio" selected=type}}Options{{/paper-radio}}

    {{#paper-button action=(action "newQuestion" model.framework.id) raised=true}}Add Question{{/paper-button}}
  </p>
{{/paper-item}}

If you want to loop over object properties instead, you can check out the each-in helper

Upvotes: 2

Related Questions