1

我开始了解 Ember JS。我正在尝试创建一个帐户列表，并且在每个帐户旁边我想要一个链接来导航到该帐户的交易列表。当我加载请求 /accounts 的第一页时，我成功获取了我的帐户列表。但是当我点击

{{#linkTo transactions this}}see transactions{{/linkTo}}

浏览器 URl 转到 /#/transactions/1，但我得到一个空页面。如果我直接在浏览器中加载此 URL，则一切正常。但是从账户列表中点击一个账户，我什么也得不到。

账户模板如下：

<ul id="conta-list">
    {{#each controller}}
        <li>
            Account: {{name}} {{#linkTo transactions this}}see transactions{{/linkTo}}
        </li>
    {{/each}}
</ul>

交易模板是：

<ul>
    {{#each controller}}
        <li>
            {{description}} = ${{value}}
        </li>
    {{/each}}
</ul>

申请代码：

window.App = Ember.Application.create({
    LOG_TRANSITIONS: true
});

App.Router.map(function () {
  this.route('accounts');
  this.route('transactions', { path: '/transactions/:account_id' });
});

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

App.TransactionsRoute = Ember.Route.extend({
    model: function (params) {
        return App.Transaction.find({ account_id: params.account_id });
    }
});

App.Store = DS.Store.extend({
  adapter: 'DS.RESTAdapter'
});

App.Account = DS.Model.extend({
  name: DS.attr('string')
});

App.Transaction = DS.Model.extend({
  description: DS.attr('string'),
  value: DS.attr('number'),
  account: DS.belongsTo('App.Account')
});

我在控制台中得到“对象 [对象对象] 没有方法 'addArrayObserver'”。

如果我重新加载浏览器，路由 /transactions/:account_id 只会访问服务器。

4

1 回答 1

2

我在控制台中得到“对象 [对象对象] 没有方法 'addArrayObserver'”。

这是因为 linkTo 帮助器将帐户传递给事务路由，但您的模板期望事务模型是事务数组。

如果我直接在浏览器中加载此 URL，则一切正常。但是从账户列表中点击一个账户，我什么也得不到。

因此，当您通过 url 访问时，将调用路由的模型挂钩，App.Transaction.find向服务器发出请求，一切正常。按照设计，在跟随链接时不会发生这种情况 - 相反，您将上下文参数传递给 linkTo 帮助器，这些参数用于设置路由的模型。所以在这种情况下，ember 路由器不会调用路由的模型钩子。

完成这项工作的ember 方法是将事务建模为嵌套资源。所以你的路线看起来像这样：

App.Router.map(function () {
  this.route('accounts');
  this.resource('account', { path: '/account/:account_id' }, function() {
    this.route('transactions');
  });
});

使用这种方法，您可以使用自动生成的 Account 路由，但需要定义 AccountTransactions 路由。

App.AccountTransactionsRoute = Ember.Route.extend({
  model: function (params) {
    return this.modelFor("account").get('transactions');
  }
});
于 2013-08-14T21:25:26.520 回答