为什么 Ember.js 指南中的这个示例不起作用？答案

【问题标题】：Why does this example from the Ember.js guides not work?为什么 Ember.js 指南中的这个示例不起作用？
【发布时间】：2015-08-03 01:26:21
【问题描述】：

我无法让 Ember.js 网站指南部分的第二个代码示例正常工作。关注 the Simple Routes example 似乎并没有按照生成的 Web 应用程序的预期进行操作。

我已按照指南开头到该示例结尾的所有步骤操作，完全复制代码，但有两个例外。首先，我对routes/favorites.js 做了一个小改动，以解决我缺少服务器后端的问题，如下所示：

// import ajax from 'ic-ajax';

export default Ember.Route.extend({
 model() {
    // // the model is an Array of all of the posts
    // // fetched from this url
    // return ajax('/a/service/url/where/posts/live');
    return [{ title: 'Test 1' }, { title: 'Test 2' }];
  }
});

其次，我在templates/application.hbs 中添加了一个{{outlet}} 以显示templates/favorites.hbs：

<h1>{{appName}}</h1>
<h2>{{model.title}}</h2>

{{outlet}}

不幸的是，在运行ember serve 时转到/favorites 只会显示与/ 相同的内容：application.hbs 的内容（没有favorites.hbs 的内容）。我希望这会显示一个包含项目“测试 1”和“测试 2”的列表。

为什么这不起作用？我做错了吗？

当我在命令行上运行 ember -v 时，我得到了这个：

version: 1.13.6
node: 0.12.7
npm: 2.13.2
os: darwin x64

更新：这里是templates/favorites.hbs：

<ul>
{{#each controller as |item|}}
  <li>{{item.title}}</li>
{{/each}}
</ul>

这里是/router.js：

var Router = Ember.Router.extend();

Router.map(function(){
  this.route('favorites');
});

export default Router;

我收到来自服务器的弃用警告：

DEPRECATION: Using `{{controller}}` or any path based on it ('my-app/templates/favorites.hbs' @ L2:C0) has been deprecated.

我还收到四个类似这样的 JSHint 错误：

'Ember' is not defined.

【问题讨论】：

您的模型正在返回一个集合，并且您正在尝试访问数组之外的属性title。您要么需要使用 each 帮助器迭代模板中的集合，要么更改模型挂钩以返回单个对象 return { title: 'Test 1' };
你也应该显示你的路由器，有什么错误吗？
@Kingpin2k 我已将我的路由器和模板代码以及命令行中的错误添加到原始帖子中。网页的 JavaScript 控制台给出了这个：[Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". 用单个项目替换项目数组并将 favorites.hbs 更改为 <p>{{model.title}}</p> 似乎也不起作用。
@GarethJohnson 关于违反内容安全策略：您需要通过在config/environment.js 中将{ 'style-src': "'self' 'unsafe-inline'" }, 添加到您的ENV.contentSecurityPolicy 来允许它。更多信息：emberigniter.com/…
我不确定您可能缺少什么。我重新创建了您的应用程序（请参阅 github.com/frank06/simpleroutes ），当我访问 http://localhost:4200/favorites 时，我确实看到了一个带有“测试 1”和“测试 2”的列表。你能仔细检查我的回购吗？

标签： javascript ember.js ember-cli

【解决方案1】：

好的，是的，这并不完全明显。基本上 ember-cli 有一个禁用代理控制器的包：https://github.com/cibernox/ember-disable-proxy-controllers

这与：

弃用：使用 {{controller}} 或任何基于它的路径 ('my-app/templates/favorites.hbs' @ L2:C0) 已被弃用。

当您像指南建议的那样使用 ember-cli 时，您实际上无法迭代控制器。而是遍历model（这就是你的数据没有被渲染的原因）：

{{#each model as |item|}}
  <li>{{item.title}}</li>
{{/each}}

摆脱：

'Ember' is not defined.

在它被提出的文件的顶部添加这个：

import Ember from 'ember';

【讨论】：

谢谢，这消除了弃用警告和 JSHint 错误。不幸的是，favorites.hbs 的内容仍然没有出现在http://localhost:4200/favorites。（我怀疑这与迭代项目无关，因为用单个对象替换数组并将模板更改为 <p>{{model.title}}</p> 也不起作用。）

【解决方案2】：

为了能够在没有哈希的情况下导航（http://localhost:4200/favorites 而不是 http://localhost:4200/#/favorites），请确保您的路由器已设置其位置类型：

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType  // typically 'auto'
});

Router.map(function() {
  this.route('favorites');
});

export default Router;

【讨论】：

再次感谢！这确实应该包含在指南中。

【解决方案3】：

代替{{#each controller as |item|}} 试试{{#each item in model}}

【讨论】：