ArrayProxy의 항목을 다른 객체의 속성에 바인딩 할 수 있습니까?

Question

jsfiddle에 예를 만들었습니다.

자바 스크립트 : 나는 또한 여기에 코드를 내려 줄게

window.App = Ember.Application.create(); 

TypeA = Ember.Object.extend({ 
    propertyA: "" 
}); 

TypeB = Ember.Object.extend({ 
    propertyB: "" 
}); 

App.someController = Ember.ArrayProxy.create({ 
    content: [] 
}); 

var aa = TypeA.create({propertyA: "aa"}); 
var ab = TypeA.create({propertyA: "ab"}); 
var ba = TypeB.create({propertyB: "ba"}); 
var bb = TypeB.create({propertyB: "bb"}); 

// I'm probably just copying the string here so sort of realizing 
// that the binding "breaks", however I don't get how to maintain the "bond". 
App.someController.pushObject(aa.get("propertyA")); 
App.someController.pushObject(ab.get("propertyA")); 
App.someController.pushObject(ba.get("propertyB")); 
App.someController.pushObject(bb.get("propertyB")); 

// I'd like this to update the value "aa" in the list 
aa.set('propertyA', "AA"); 

HTML :

<script type="text/x-handlebars"> 
    {{#collection contentBinding="App.someController" tagName="ul"}} 
    {{content}} 
    {{/collection}} 
</script> 

그래서 someController의 항목의 소스가 여러 다른 개체 수 있지만, 수 사이의 결합 객체의 속성과 someController의 항목은 보존되어야합니다. 이 작업을 수행하는 쉬운 방법은 무엇입니까? 어떤 개체 또는보기에서 someController의 값을 래핑하는 것이 좋겠지 만, "전역"개체 (예 : 모든 바인딩이 전체 "전역"경로를 사용하는 것처럼 보인)에 바인딩을 만드는 방법을 찾을 수 없습니다. "App.someObject.property")

많은 아이디어가 감사합니다! 감사. jsfiddle :

Answer 1

좋아, 그래서 Veebs 게시물의 도움을 받아 알아 냈습니다. 분명히

Ember.Object.create({ 
    obj: obj, 
    out: function() { 
     return this.get('obj').get(property); 
    }.property('obj.' + property) 
}); 

, 피사체의 변화의 한 속성의 객체 (든) 인 경우라고하여 그래서, 변경할 표시된 : I 폼의 목적에 문자열을 (속성에서 발생)을 배치 권취 그 outobj에 따라 달라집니다 obj.property에서 변경 사항을 선택합니다.

window.App = Ember.Application.create(); 

TypeA = Ember.Object.extend({ 
    propertyA: "", 
    propertyC: "" 
}); 

TypeB = Ember.Object.extend({ 
    propertyB: "", 
}); 

App.someController = Ember.ArrayProxy.create({ 
    content: [] 
}); 

var a = TypeA.create({propertyA: "aa", propertyC: "ac"}); 
var b = TypeA.create({propertyB: "bb"}); 

function createWrapper(obj, property) { 
    return Ember.Object.create({ 
     obj: obj, 
     out: function() { 
      return this.get('obj').get(property); 
     }.property('obj.' + property) 
    }); 
} 

App.someController.pushObject(createWrapper(a, "propertyA")); 
App.someController.pushObject(createWrapper(a, "propertyC")); 
App.someController.pushObject(createWrapper(b, "propertyB")); 

setTimeout(function() { 
    a.set('propertyA', "AA"); 
    a.set('propertyC', "AC"); 
    b.set('propertyB', "BB"); 
    a.set('propertyA', "AA2"); 
},2000); 

... 그리고 (약간 변경) 템플릿 : (jsfiddle에서도 사용 가능)

<script type="text/x-handlebars"> 
    {{#collection contentBinding="App.someController" tagName="ul"}} 
     {{content.out}} 
    {{/collection}} 
</script> 

감사 그래서 여기

은 변경 원래 코드 도움을 청합니다!

편집 : 두 번째 생각은,이 업데이트가 잠시 후 발생하는 이상하지 않을 경우, 작동하지 않았다. 젠장. 편집 : 정식 버전으로 업데이트되었습니다.

Answer 2

희망이 당신이 후에 무엇이다.

당신은 속성보다는 배열로 객체를 밀어 넣을 필요가 있다고 생각합니다.

App.someController.pushObject(aa); 
App.someController.pushObject(ab); 
App.someController.pushObject(ba); 
App.someController.pushObject(bb); 

그런 다음 템플릿에서 필수 속성을 참조하십시오. 배열에 aa.get("propertyA")를 밀어

<script type="text/x-handlebars"> 
    {{#collection contentBinding="App.someController" tagName="ul"}} 
     {{content.propertyA}} 
     {{content.propertyB}} 
    {{/collection}} 
</script> 

, 당신은 단순한 문자열과 개체 사이의 관계를 밀고하고 배열이 끊어집니다.

임의의 개체에 대해 propertyA 또는 propertyB이 반환되어야하는지 계산할 수있는 계산 된 속성을 만드는 것이 좋습니다. 그런 다음 컬렉션에서 계산 된 속성을 사용할 수 있습니다.

<script type="text/x-handlebars"> 
    {{#collection contentBinding="App.someController" tagName="ul"}} 
     {{content.newComputedProperty}} 
    {{/collection}} 
</script>