2014-07-09 5 views
1

Ember에서 데이터 바인딩을보고 있는데 두 개의 input type="number" 요소를 바인딩하여 두 요소 중 하나를 변경하면 다른 요소가 업데이트됩니다. Here is the JSBin.Emberjs : 숫자 입력 간의 양방향 데이터 바인딩

Biker = DS.Model.extend(
    bikes: (-> 
     @get("tires")/2 
    ).property("tires") 
    tires: (-> 
     @get("bikes") * 2 
    ).property("bikes") 
) 

하지만 그 다음 스택 오버 플로우가 발생합니다 : 내가하고 싶은 무엇

는 다음과

Uncaught RangeError: Maximum call stack size exceeded ember.js:1 Ember.assert ember.js:1 get ember.js:2167 Ember.Observable.Ember.Mixin.create.get ember.js:12425 (anonymous function) biker.js:32 ComputedPropertyPrototype.get ember.js:4951 get ember.js:2176 Ember.Observable.Ember.Mixin.create.get ember.js:12425 (anonymous function) biker.js:29 ComputedPropertyPrototype.get

2 웨이를 달성하기 위해 가장 좋은 방법은 무엇 절대 데이터 바인딩 input 요소?

참고 : I asked something similar, but about angular.

답변

3

순환 코드를 작성하는 대신 속성 중 하나만 다른 것을 관찰하십시오. Ember's computed properties은이 정확한 목적을 위해 세터와 게터 함수를 정의 할 수 있습니다 :

App.Biker = DS.Model.extend({ 
    bikes: DS.attr('number'), 
    tires: function(key, value) { 
    // Setter 
    // Says: if we did this.set('tires', something); 
    if (arguments.length > 1) { 
     var bikes = value != 0 ? value/2 : 0; // Incase zero bikes 
     this.set('bikes', bikes); 
    } 

    // Getter 
    return this.get('bikes') * 2; 
    }.property('bikes') 
}) 
+0

흠이 나를 위해 작동하지 : http://emberjs.jsbin.com/cazeriri/2/ – user1429980

+1

그럼 당신은 모델을 호출하지 않는 , 당신은 모델을 임의의 객체 배열로 설정하는 것입니다. 대신 [Ember.FIXTURES] (http://emberjs.com/guides/models/the-fixture-adapter/)를 설정하고 모델 메소드에서'this.store.find ('biker')를 반환하십시오. 그럼에도 불구하고 각 input의'valueBinding'은 라우트의 모델이 아닌 컨트롤러의'content' 속성에있는 속성에 대한 경계이기 때문에 템플릿에 표시된 속성을 변경할 것이라고 생각하지 않습니다. 컨트롤러에서 계산 된 속성을 설정하고 모델의 '자전거'와 '타이어'에 대해 DS.attr ('number')을 사용하는 것이 좋습니다. –

+0

잘 모르겠습니다. 업데이트 된 jsbin을 제공 할 수 있습니까? – user1429980

관련 문제