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

Question

我无法让Ember.js网站指南部分的第二个代码示例工作。遵循简单的路由示例似乎并没有做在最终的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中添加了一个templates/application.hbs，以显示templates/favorites.hbs

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

{{outlet}}

不幸的是，在运行/favorites时，ember serve只显示了与/相同的内容：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.

Answer 1

为了能够在没有散列(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;

Answer 2

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

这与以下方面有关：

弃用:使用{{controller}}或基于它的任何路径(‘my/templates/收藏夹’@ L2:C0)已被废弃。

当你像指南所建议的那样使用ember时，你实际上不能迭代控制器。相反，在model上迭代(这就是为什么没有呈现数据)：

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

摆脱：

'Ember' is not defined.

将其添加到正在引发的文件的顶部：

import Ember from 'ember';

Answer 3

而不是{{#each controller as |item|}}，尝试{{#each item in model}}