我有一个 ember 应用程序,它连接到一个单独的 phoenix API。我正在使用 ActiveModelAdapter
,一切都工作正常,直到我将 ember 版本升级到 2.1.0。现在,数据将加载到商店中,但不会显示在页面上。我的浏览器控制台没有抛出任何错误,我只是在这一点上感到困惑。我以前从未使用过这个版本的 Ember,所以任何正确方向的指示将不胜感激!
我的适配器:
# app/adapters/application.js
import DS from 'ember-data';
import ActiveModelAdapter from 'active-model-adapter';
export default ActiveModelAdapter.extend({
namespace: 'v1',
host: 'http://localhost:4000'
});
我的路由器:
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
export default Router.map(function() {
this.route('resources', function() {
this.route('new');
this.route('resource', { path: '/:resource_id' });
});
});
我的模型:
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
description: DS.attr('string'),
url: DS.attr('string'),
topic: DS.attr('string')
});
我的 Controller :
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
editResource: function() {
this.toggleProperty('isEditing');
},
saveResource: function() {
var resource = this.get('model');
resource.save();
this.toggleProperty('isEditing');
},
},
isEditing: false
});
我的索引页面模板,用于列出所有资源:
<div class="container col-md-6 col-md-offset-3">
<ul class="list-group">
{{#each resource in model}}
<li class="list-group-item active">
{{#link-to 'resources.resource' resource}}
<h5>{{resource.title}}</h5>
{{/link-to}}</li>
<li class="list-group-item"><p>topic: {{resource.topic}}</p></li>
<li class="list-group-item"><p>url: {{resource.url}}</p></li>
{{/each}}
</ul>
</div>
这是我在尝试访问索引页面路由时在浏览器控制台中看到的内容:localhost:4200/resources
在 ember 数据检查器中,我的四个资源都在那里,但没有显示在页面上。同时控制台也没有任何错误。
再次,非常感谢任何帮助。谢谢!
此外,如果有人感兴趣,我的存储库就在这里,我正在研究的分支是单元测试:
https://github.com/SophieDeBenedetto/flybrary-front/tree/unit-tests
更新:感谢@dfreeman,我的索引模板现在可以正确渲染,但渲染单个模型对象的显示页面仍然是空白:
<div class="well col-sm-4 col-sm-offset-4" style="text-align: center;" {{bind-attr class="resource.isShowing:show resource.isEditing:editing"}}>
{{#if model.isEditing}}
<input class="edit">{{model.title}}
<p class="edit" >{{model.url}}</p>
<p class="edit" >topic: {{model.topic}}</p>
<p class="edit" >description: {{model.description}}</p>
{{else}}
<h4 class="toggle" {{action "editResource" on="doubleClick"}}> {{model.title}}</h4>
<p class="toggle" {{action "editResource" on="doubleClick"}}> {{model.url}}</p>
<p class="toggle" {{action "editResource" on="doubleClick"}}>topic: {{model.topic}}</p>
<label class="toggle" {{action "editResource" on="doubleClick"}}>description: {{model.description}}</label>
{{/if}}
<p>{{#link-to 'resources.resource.edit' model}}Edit{{/link-to}}</p>
</div>
最佳答案
each
帮助器的 {{#each x in y}}
版本是 removed in Ember 2.0 。回到 1.10,一个 new generalized block syntax被引入来取代它的位置。
如果您更改模板以使用新语法,那么就可以开始了。
{{#each model as |resource|}}
...
{{/each}}
关于javascript - Ember 数据加载到存储中,不会显示在页面上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33512029/