Question

我无法获得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' }];
  }
});

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

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

{{outlet}}

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

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

当我在命令行上运行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

好的，这不是很明显。基本上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';

Answer 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;

Answer 3

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

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

3 个答案: