Ember.js模板没有迭代{{#each}}

时间:2016-05-25 16:14:47

标签: javascript ember.js

我有一个运行{{#each}}循环的Ember.js手柄模板来迭代返回的商店数据。商店中只有一条记录,所以我希望这段代码能够执行一次。但是,它根本没有执行,我似乎无法弄清楚原因。这是.hbs代码:

{{#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}}

{{#each}}循环应该在我的商店中从此查询呈现数据(来自此页面的routes.js文件):

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)
  })
}

我知道商店的路由和查询工作正常,因为我尝试迭代的框架是通过Ember检查器在数据存储中:

Ember.js Inspector Data

页面上还有其他{{#each}}循环(对于&#34;问题&#34;存储)工作没有问题。任何想法都表示赞赏。

1 个答案:

答案 0 :(得分:2)

model.framework是您使用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
})

然而,正如Ember Docs解释:

  

{{#each}}助手循环遍历集合中的元素。

这意味着您不能遍历单个对象,因为它不是集合。 您需要删除{{each}}帮助,然后使用model.framework代替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}}

如果您想要循环对象属性,可以查看each-in helper