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")
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
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
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")
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
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
Share Improve this question asked Nov 1, 2012 at 22:42 Rick MossRick Moss 9261 gold badge17 silver badges34 bronze badges1 Answer
Reset to default 17I 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);
}
});
Sample use case:
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');
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);