我正在尝试用EmberCLI等来自学EmberJS的基础知识。遇到了one folder structure hitchwhich Henry Vonfire helped me的理解和清理。
现在我的“sea leg”更加稳定了,我正在尝试实现“Loading Data from a Server”示例from the official EmberJS homepage。我可以让应用运行,但显然没有数据返回或呈现到前端,尽管检查器清楚地显示数据在我的浏览器中被正确获取。为什么我的“handlebars”模板不能解析数据?
我的环境如下:
***Ember CLI版本:**1.13.12
***NodeJS 版本:**4.2.2
***NPM(节点程序包管理器)版本:**2.14.10
***看守人:**4.1.0
而我的简单/简陋的控制器结构如下:
app/templates/pull-requests.hbs
app/templates/pull-requests.hbs
个
而每一项的内容如下:app/routes/pull-requests.js
的内容:
import Ember from 'ember';
export default Ember.Route.extend({
setupController: function(controller) {
controller.set('title', "Pull Requests");
},
activate: function() {
document.title = "Pull Requests";
},
model: function() {
return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls').then(function(data) {
return data.splice(0, 3);
});
}
});
app/templates/pull-requests.hbs
的内容:
<h1>{{title}}</h1>
<p>This is where we would be parsing raw pull request data.</p>
<h3>Last 3 Pull Requests to Ember.js</h3>
<ul>
{{#each model as |pr|}}
<li>
<div class="issue-number">#{{pr.number}}</div>
<div class="issue-title">
<a href={{pr.html_url}}>{{pr.title}}</a>
</div>
<div class="author-name">
Opened by <a href={{pr.head.user.html_url}}><strong>@{{pr.head.user.login}}</strong></a>
</div>
</li>
{{/each}}
</ul>
{{outlet}}
最初,我有一些CORS问题,通过在config/environment.js
中设置以下contentSecurityPolicy
块解决了这些问题:
contentSecurityPolicy: {
'default-src': "'none'",
'script-src': "'self'",
'font-src': "'self'",
'connect-src': "'self' https://api.github.com/",
'img-src': "'self'",
'style-src': "'self'",
'media-src': "'self'"
},
现在页面加载时没有错误,但没有迭代数据。这是怎么回事?是不是应该将其重新调整到models/pull-requests.js
中的代码块中?还是app/templates/pull-requests.hbs
中存在某种语法错误,导致它以某种方式失败?还是其他原因?
**更新:**所以Kitler’s answer解锁了这个设置失败的核心原因。我不小心用我的代码逻辑覆盖了setupController
,而没有返回它的数据。虽然我确实可以覆盖它,但我应该设置return this._super()
;通过不这样做,我有效地从路由器链的其余部分擦除了X1 M10 N1 X。但是我发布这个更新是为了显示我在X1 M11 N1 X中具体调整了什么,所以其他任何人都可以从这个解决方案中受益。
我拥有的原始setupController
代码是这样的:
setupController: function(controller) {
controller.set('title', "Pull Requests");
},
注意它是如何将controller
传递给接口的?为了使它在我的设置中工作,我必须添加model
,然后添加return this._super(controller, model)
,如下所示:
setupController: function(controller, model) {
controller.set('title', "Pull Requests");
return this._super(controller, model);
},
有了那一套,一切都如预期的那样工作!
1条答案
按热度按时间bxjv4tth1#
这里的问题(最有可能的)是覆盖了
setupController
方法,并且没有返回super,setupController
所做的是在控制器上设置model属性。您需要在
controller.set('title', "Pull Requests");
之后执行return this._super(...arguments)