模型加载后Ember.js不重新渲染模板

时间:2014-07-01 20:52:10

标签: javascript ember.js handlebars.js

我正在使用Ruby on Rails API服务器学习Ember.js。我有路由,模板和模型所有设置和工作 - 但一旦从API服务器加载数据后,模板永远不会重新呈现。我没有收到任何错误消息,我知道客户正在看着Ember检查员。

客户列表应该在start之后显示 customer not being displayed

正在从API服务器正确加载客户列表: customer is being loaded from the API

路由器

// javacripts/router.js
App.Router.map(function() {
  this.resource('customers', { path: "/" });
});

客户路线

// javascripts/routes/customer_routes.js
App.CustomersRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('customer');
  },
  renderTemplate: function() {
    this.render('customers/index');
  }
});

客户模式

// javascripts/models/customer.js
App.Customer = DS.Model.extend({
  name: DS.attr('string')
});

客户索引模板

// javacripts/templates/customers/index.js.handlebars
<ul>
  <li>start</li>
  {{#each customers}}
    <li>{{name}}</li>
  {{/each}}
</ul>

商品

// javacripts/store.js
App.ApplicationAdapter = DS.ActiveModelAdapter.extend({
  namespace: 'api/v1'
});

2 个答案:

答案 0 :(得分:1)

而不是

{{#each customers}}

它应该是

{{#each controller}}
  {{name}}
{{/each}}

{{#each customer in controller}}
    {{customer.name}}
{{/each}}

我最近发布了两个截屏视频。一个展示了如何开始使用新应用程序,另一个展示了如何设置Grunt:

你也可能会在今年早些时候的一次演讲中得到一些用处,这会在演讲期间开发一个简单的应用程序,包括Ember Data。

答案 1 :(得分:1)

您的客户/索引模板引用了&#34;客户&#34;不存在的集合。

你的路线的模型钩子正在返回一个记录数组,这使得Ember生成一个Ember.ArrayController,其模型设置为你的客户数组。它没有名为&#34; customers&#34;的属性,因此{{#each customers}}没有任何东西可以迭代。如果将其更改为{{#each}}(因为此范围中的this引用控制器(类似于数组)或{{#each model}}(以显式访问ArrayController的模型数组) ),它应该正常工作。

此外,Route中的renderTemplate挂钩是默认行为,因此您可以删除它。

顺便提一下,我建议您在开始学习基础知识的同时使用Ember JSBin或其他内容,因此当您需要寻求帮助时,您只需链接到垃圾箱即可,人们可以通过实时代码与您合作,以最少的努力帮助您。这种低门槛对于那些为互联网积分做免费工作的人来说是一个很大的不同。