一个控制器如何在 Ember.js 中观察任意控制器/模型上的事件？答案

【问题标题】：How can one controller observe events on an arbitrary controller/model in Ember.js?一个控制器如何在 Ember.js 中观察任意控制器/模型上的事件？
【发布时间】：2013-11-13 19:36:02
【问题描述】：

我有这个非常简单的模型，由一个几乎空的控制器支持：

App.EnergySegment = Ember.Object.extend({
    identity: 'segment',
    isSelected: false,
});
App.SegmentController = Ember.ObjectController.extend({
    // simple properties
    debug: true,

    // actions
    actions: {
        toggleSegment: function() {
            var status = this.get('isSelected');
            this.set('isSelected', !status);
        }
    }
});

我有一个完全不同的控制器，需要计算所有选定段的成本：

App.DashboardController = Ember.ObjectController.extend({
    needs: 'segment',

    cost: function() {
        alert('a selection occurred!')
        return '1.00';
    }.property('controllers.segment.isSelected')
});

为什么当我选择一个细分时我的仪表板成本函数没有被触发？（我没有使用 Ember Data，仅供参考。）

【问题讨论】：

你能组装一个 jsFiddle 吗？
仪表板是否负责多个细分？
@AmirT 再次嗨 :) 是的，段包含各种属性（包括成本），仪表板将显示这些属性的变体。例如，所有选定细分和各种图表的平均费用。
看起来@Renato 在复数段控制器的路径上，我认为这是问题所在。祝你好运！

标签： javascript model-view-controller ember.js

【解决方案1】：

您正在混合property 和observes。计算属性只有在get() 时才会触发。

App.DashboardController = Ember.ObjectController.extend({
    needs: ['segment'],

    cost: function() {
        var segment = this.get("controllers.segment");

        // Example: the cost changes if the segment selection
        // changes
        if(segment.get('isSelected')) {
          return '1.00';
        } else {
          return '0.00';
        }
    }.property('controllers.segment.isSelected'),

    // When the segment is selected/deselected, the alert
    // will pop up
    _selectedSegmentDidChange: function() {
        alert('a selection occurred!');
    }.observes('controllers.segment.isSelected'),
});

从 cmets 看来，observes/property 混淆并不是真正的问题，而是您使用的是 ObjectController 与 ArrayController 的事实。这是SegmentsController 的样子：

// Mind the plural
App.SegmentsController = Ember.ArrayController.extend({
  selected: Ember.computed.filterBy('content', 'isSelected'),
});

由此，我们可以让DashboardController 对集合起作用：

App.DashboardController = Ember.ObjectController.extend({
  needs: ['segments'], // Mind the plural again

  // Make a shorter alias
  _selectedSegments: Ember.computed.alias("controllers.segments.selected"),

  cost: function() {
    var costs = this.get("_selectedSegments").getEach("cost");

    return costs.reduce(function(total, current) {
      return total + current;
    }, 0);
  }.property("_selectedSegments.@each.cost"),      
});

你可能想看看这个例子：http://jsbin.com/ALIBewA/1/edit

【讨论】：

我在模板中使用 {{cost}} - 这不算数吗？
我看到..DidChange 在这里和那里弹出。这对 Ember 有什么特别的意义吗？
这只是观察者的命名约定，但您可以随意命名它们。 AFAIK 这不是 Ember 所依赖的东西
好吧，这对我来说还行不通。每当任何段发生变化时，这都应该触发 - 它没有绑定到特定元素，对吗？然后我可以通过this 访问该段，但不能访问所有选定的段，对吗？
那么您需要一个SegmentsController - 一个包含所有段的ArrayController。我会尝试做一个演示