कैसे गतिशील रूप से एक Ember.js वस्तु

Question

तो मैं गतिशील रूप से एक 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.checkerName}Changed"] = (-> 
     if @get("controller.parent.isLoaded") 
      @get("controller")[item.methodToCall](@get(item.checkerName)) 
    ).observes(item.checkerName) 

App.ColumnSetupView.reopen add_this 

किसी को भी मुझे बता सकते हैं मैं गलत क्या कर रहा हूँ? क्या ऐसा करने के लिए इससे अच्छा तरीका है ? क्या मुझे इसे मिश्रण में करना चाहिए? यदि ऐसा है तो

Answer 1

मैं अपने सटीक उपयोग के मामले में पता है तो कृपया नहीं है, लेकिन जैसा कि आप ने कहा, अपने वर्णित समस्या एक Mixin के साथ हल किया जा सकता है, को देखने के http://jsfiddle.net/pangratz666/a3Usx/

जावास्क्रिप्ट:

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/ देखें:

जावास्क्रिप्ट:

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