ArrayProxyのエントリを他のオブジェクトのプロパティにバインドできますか？

Question

jsfiddleに例を作成しました。また、私はここにコードをドロップします：

Javascriptを：

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"）

非常に感謝しています！ありがとう。

Answer 1

私はVeebsの投稿の助けを借りてそれを分かりました。言って、オブジェクトのプロパティが変更されたが、オブジェクトが（何らかの形で）それを変更したマークされている場合、

明らか

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

ので：私は、フォームのオブジェクト内の文字列（プロパティからの発信）を包む巻き上げそのoutはobjに依存し、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> 

おかげで助けを求めて！

編集：2番目の考えでは、これは動作しませんでした。ほら、それ。 編集：固定バージョンに更新されました。

Answer 2

ご希望の場合は、jsfiddleです。

私はあなたがプロパティではなく配列にオブジェクトをプッシュする必要があると思います。

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>