如何动态地将观察方法添加到Ember.js对象中 [英] how to dynamically add observer methods to an Ember.js object

问题描述

所以我试图动态添加这些观察方法到一个Ember.js对象

So i am trying to dynamically add these observer methods to a Ember.js object

holderStandoutCheckedChanged: (->
    if @get("controller.parent.isLoaded")
        @get("controller").toggleParentStandout(@get("standoutHolderChecked"))
).observes("standoutHolderChecked")

holderPaddingCheckedChanged: (->
    if @get("controller.parent.isLoaded")
        @get("controller").toggleParentPadding(@get("holderPaddingChecked"))
).observes("holderPaddingChecked")

holderMarginCheckedChanged: (->
    if @get("controller.parent.isLoaded")
        @get("controller").toggleParentMargin(@get("holderMarginChecked"))
).observes("holderMarginChecked")

我有这个代码到目前为止，但item.methodToCall函数没有被调用

I have this code so far but the item.methodToCall function is not getting called

methodsToDefine = [
    {checkerName: "standoutHolderChecked", methodToCall: "toggleParentStandout"},
    {checkerName: "holderPaddingChecked", methodToCall: "toggleParentPadding"},
    {checkerName: "holderMarginChecked", methodToCall: "toggleParentMargin"}
]

add_this = { }

for item in methodsToDefine
    add_this["#{item.checkerName}Changed"] = (->
        if @get("controller.parent.isLoaded")
            @get("controller")[item.methodToCall](@get(item.checkerName))
    ).observes(item.checkerName)

App.ColumnSetupView.reopen add_this

任何人都可以告诉我我做错了什么？有没有更好的方法来做到这一点？我应该在mixin中做这个吗？如果是这样，请

Can anyone tell me what i am doing wrong ? Is there a better way to do this ? Should i be doing this in a mixin ? If so please

推荐答案

我不知道你的确切用例，但正如你所说，你所描述的问题可以解决Mixin，请参阅 http://jsfiddle.net/pangratz666/a3Usx/

I don't know your exact use case, but as you said, your described problem could be solved with a Mixin, see http://jsfiddle.net/pangratz666/a3Usx/

JavaScript ：

App = Ember.Application.create();

var methodsToDefine = [
    {checkerName: "standoutHolderChecked", methodToCall: "toggleParentStandout"},
    {checkerName: "holderPaddingChecked", methodToCall: "toggleParentPadding"},
    {checkerName: "holderMarginChecked", methodToCall: "toggleParentMargin"}
];

App.Stalker = Ember.Mixin.create({
  init: function() {
    this._super();
    methodsToDefine.forEach(function(config) {
      // add an observer for checkerName - a change should call methodToCall
      Ember.addObserver(this, config.checkerName, this, config.methodToCall);
    }, this);
  },

  willDestroy: function() {
    this._super();

    // since we are good citizens, we remove the observers when the object is destroyed
    methodsToDefine.forEach(function(config) {
      Ember.removeObserver(this, config.checkerName, this, config.methodToCall);
    }, this);
  }
});

示例用例：

var myObj = Ember.Object.create(App.Stalker, {
  toggleParentStandout: function() {
    console.log("toggleParentStandout called");
  },
  toggleParentPadding: function() {
    console.log("toggleParentPadding called");
  },
  toggleParentMargin: function() {
    console.log("toggleParentMargin called");
  }
});

myObj.set('standoutHolderChecked', 42);
myObj.set('holderPaddingChecked', 'Buster');

---

另一个实现将是一个使用数组的mixin watchProperties ，这是应遵守的属性列表，请参见 http://jsfiddle.net/pangratz666/bSF3Z/ ：

---

Another implementation would be a mixin which uses an array watchProperties, which is a list of properties which shall be observed, see http://jsfiddle.net/pangratz666/bSF3Z/:

JavaScript ：

App = Em.Application.create();

App.Stalker = Ember.Mixin.create({
  init: function() {
    this._super();

    var props = this.get('watchProperties');
    Ember.assert("watchProperties should be an array", Ember.isArray(props));
    props.forEach(function(property) {
      // invoke <property>Changed when <property> changes ...
      Ember.addObserver(this, property, this, '%@Changed'.fmt(property));
    }, this);
  },

  willDestroy: function() {
    this._super();

    this.get('watchProperties').forEach(function(property) {
      Ember.removeObserver(this, property, this, '%@Changed'.fmt(property));
    }, this);
  }
});

var o = Ember.Object.create(App.Stalker, {
  // 'a b'.w() == ['a', 'b']
  watchProperties: 'a b'.w(),
  aChanged: function() {
    console.log("a changed");
  }
});

o.set('a', 123);

这篇关于如何动态地将观察方法添加到Ember.js对象中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！