2012-11-01 4 views
8

Ember.js 객체에 옵저버 메소드를 추가하는 방법동적으로 내가 동적으로 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 

내가 뭘 잘못하고 있다고 말할 수 있습니까? 이 작업을 수행하는 더 좋은 방법이 있습니까? 내가 믹스 인에서 이것을해야 할까? 그렇다면

답변

17

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

,

또 다른 구현 관찰해야한다 속성의 목록은 배열 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); 
+0

pangratz 와우를 무엇 amazining 답변 감사합니다 많이. –

+0

이렇게하면 많은 문제가 해결됩니다. 감사합니다. 'fields. @ each.value'를 관찰하는 방법을 알아 내기 위해 배열을 반복하지 않고 무엇이 바뀌 었는지 알아 내려고했습니다. 이를 통해 동적 양식 필드 객체가 매우 다른보고있는 모델과 통신 할 수있게 해주는 일종의 프록시를 수행 할 수 있습니다. – jrode