带有 Ember 数据的 Ember 入门套件答案

【问题标题】：Ember Starter Kit with Ember Data带有 Ember 数据的 Ember 入门套件
【发布时间】：2013-04-19 05:43:23
【问题描述】：

Ember 1.0.0 RC3 附带一个入门套件，其中包含一个非常简单的演示，可以在列表中显示三种颜色。

模型数据像这样直接插入到IndexRoute上：

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

我尝试将这个简单的演示更改为使用 ember-data（模型、商店、...）。然而，没有成功。我的演示的控制台输出是：

DEBUG: ------------------------------- ember-1.0.0-rc.3.js:349
DEBUG: Ember.VERSION : 1.0.0-rc.3 ember-1.0.0-rc.3.js:349
DEBUG: Handlebars.VERSION : 1.0.0-rc.3 ember-1.0.0-rc.3.js:349
DEBUG: jQuery.VERSION : 1.9.1 ember-1.0.0-rc.3.js:349
DEBUG: ------------------------------- ember-1.0.0-rc.3.js:349
Uncaught TypeError: Cannot call method 'find' of undefined appDemo.js:8
Uncaught Error: assertion failed: an Ember.CollectionView's content must implement Ember.Array. You passed <(generated index controller):ember232> ember-1.0.0-rc.3.js:52

我修改后的脚本如下所示：

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
    model: App.Color.find()
});

App.ColorsController = Ember.ArrayController.extend();


// Models
App.Store = DS.Store.extend({
  revision: 12,
  adapter: 'DS.FixtureAdapter'
});

App.Color = DS.Model.extend({
  name: DS.attr('string')
});
App.Color.FIXTURES = [{name: 1}, {name: 2}, {name: 3}, {name: 4}, {name: 5}, {name: 6}];

我的 html 看起来像这样：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <ul>
    {{#each color in controller}}
      <li>{{color.name}}</li>
    {{/each}}
    </ul>
  </script>

  <script src="js/libs/jquery-1.9.1.js"></script>
  <script src="js/libs/handlebars-1.0.0-rc.3.js"></script>
  <script src="js/libs/ember-1.0.0-rc.3.js"></script>
  <script src="js/libs/ember-data-latest.js"></script>
  <script src="js/appDemo.js"></script>

</body>
</html>

我做错了什么？

【问题讨论】：

标签： ember.js

【解决方案1】：

第一个错误在于

App.IndexRoute = Ember.Route.extend({
    model: App.Color.find()
});

您必须将模型选项定义为如下函数：

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return App.Color.find();
    }
});

第二个错误我有点不确定，但先试试这个。

【讨论】：

太棒了，这成功了。发布的代码中还有一个问题，尽管可以直接修复。夹具对象每个都需要一个 id。新行如下所示：App.Color.FIXTURES = [{id: 1, name: 1}, {id: 2, name: 2}, ...