EmberJS:在父级中访问子控制器功能

时间:2014-01-04 05:29:16

标签: ember.js

这可能更像是一个结构问题,但标题是我目前的问题。

我有以下基本应用程序:

var App = Ember.Application.create();

App.ApplicationAdapter = DS.FixtureAdapter.extend();

App.Router.map(function () {
    this.resource('numbers', {
        path: '/'
    });
    this.resource('users');

});

App.UsersRoute = Ember.Route.extend({
    model: function (params) {
        return this.store.findAll('user');
    }
});

App.NumbersRoute = Ember.Route.extend({
    model: function (params) {
        return this.store.findAll('number');
    }
});

App.User = DS.Model.extend({
    name: DS.attr('string'),
    numbers: DS.hasMany('number', {
        async: true
    })
});

App.Number = DS.Model.extend({
    value: DS.attr('number'),
    user: DS.belongsTo('user')
});


App.NumbersController = Ember.ArrayController.extend({
    total: function () {
        var total = 0;
        this.forEach(function (number) {
            total += parseFloat(number.get('value'));
        });
        return total;
    }.property()
});

App.User.FIXTURES = [{
    id: 1,
    name: 'Bob',
    numbers: [100, 101]
}, {
    id: 2,
    name: 'Fred',
    numbers: [102]
}];

App.Number.FIXTURES = [{
    id: 100,
    value: 25,
    user: 1
}, {
    id: 101,
    value: 15,
    user: 1
}, {
    id: 102,
    value: 60,
    user: 2
}];

使用模板的工作示例位于:http://jsfiddle.net/sweetrollAU/9DuR3/

该示例显示了用户和数字之间的关系。第一页是应用程序中所有数字的列表,其相关用户以及所有数字的总和。 “用户”链接显示相同的内容,但每个用户都应显示其拥有的数字的小计。

我的问题基本上是,如何在UsersController中访问NumbersController方法'total'?我应该访问此方法还是我的结构不正确?

由于

2 个答案:

答案 0 :(得分:2)

在您的情况下,它们是类似的逻辑,但它们最终来自不同的数据源。您仍然可以创建一个Mixin来帮助您在不同的Ember对象之间共享代码。

App.AddNumberMixin = Em.Mixin.create({
    sumNumbers: function(arr){
      var total = 0;
      arr.forEach(function (number) {
          total += parseFloat(number.get('value'));
      });
      return total; 
    }
});

App.UserController  = Ember.ObjectController.extend(App.AddNumberMixin, {
    total: function () {
        return this.sumNumbers(this.get('numbers'));
    }.property('numbers.@each.value')
});

App.NumbersController = Ember.ArrayController.extend(App.AddNumberMixin, {
    total: function () {
        return this.sumNumbers(this);
    }.property('@each.value')
});

http://jsfiddle.net/9DuR3/2/

答案 1 :(得分:1)

@ kingpin2k的答案似乎已经足够了,但这是另一种方法:

http://jsfiddle.net/9DuR3/3/

这里发生的是,对于每个用户,再次呈现数字,但这次使用不同的模板。即{{render}}标签之间的标签。 NumbersControlleruser.numbers集合一起提供,而不是完整的数字集合。

同样重要的是指定total函数依赖的属性(.property('@each.value'))。