如何将观察者方法动态添加到 Ember.js 对象

Posted 2023-03-03

【中文标题】如何将观察者方法动态添加到 Ember.js 对象

【英文标题】：how to dynamically add observer methods to an Ember.js object

【发布时间】：2012-10-22 14:29:20

【问题描述】：

所以我正在尝试将这些观察者方法动态添加到 Ember.js 对象中

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 函数没有被调用

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

add_this =  

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

App.ColumnSetupView.reopen add_this

谁能告诉我我做错了什么？有一个更好的方法吗 ？我应该在 mixin 中这样做吗？如果有请

【参考方案1】：

我不知道您的确切用例，但正如您所说，您描述的问题可以通过 Mixin 解决，请参阅 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');

---

另一种实现是使用数组watchProperties 的mixin，这是一个应观察的属性列表，请参阅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);

【讨论】：

这为我解决了很多问题，谢谢。试图弄清楚如何观察[e-mail]，而不必遍历数组以找出发生了什么变化。这让我可以做一种代理，让动态表单字段对象与外观截然不同的模型进行通信。