wie dynamisch Beobachter Methoden zu einem Ember.js Objekt

Question

Also ich versuche, füge ich dynamisch diese Beobachter Methoden zu einem Ember.js

Objekt

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") 

ich bisher diesen Code muss hinzufügen, aber die Funktion item.methodToCall jemand

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 

Kann sagen Sie mir nicht, was ich falsch mache genannt zu werden? Gibt es einen besseren Weg, dies zu tun? Soll ich das in einem Mix machen? Wenn ja, bitte

Answer 1

Ich weiß nicht, Ihren genauen Anwendungsfall, aber wie Sie sagen, Ihr beschriebenes Problem mit einem Mixin gelöst werden kann, sehen 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); 
    } 
}); 

Beispielanwendungsfall:

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'); 

---

Eine weitere Implementierung wäre ein mixin sein, die watchProperties ein Array verwendet, die eine Liste der Eigenschaften, die zu beachten sind, siehe 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);