ember.js 如何在EmberCLI结构中设置EmberJS主页上的“从服务器加载数据”示例?

rbl8hiat  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(74)

我正在尝试用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);
},

有了那一套,一切都如预期的那样工作!

bxjv4tth

bxjv4tth1#

这里的问题(最有可能的)是覆盖了setupController方法,并且没有返回super,setupController所做的是在控制器上设置model属性。
您需要在controller.set('title', "Pull Requests");之后执行return this._super(...arguments)

相关问题