Question

I created an example on jsfiddle. I’ll also drop the code here:

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>

So the source of the entries in someController can be various different objects, but the bond between the property of the object and the entry in someController should be preserved. Any easy way to do this? I thought of wrapping the values in someController in some object or view but I can’t find how to create a binding to a non “global” object (all the bindings I saw seemed to use a full “global” path, eg "App.someObject.property")

Any ideas much appreciated! Thanks.

Answer 1

Okay so I figured it out with help from Veebs post. I wound up wrapping the strings (originating from the property) in an object of the form:

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

Evidently, when a property of an object changes, the object is (somehow) marked changed with it, so by saying that out depends on obj it picks up changes in obj.property.

So here is the original code with the changes:

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

…and the (slightly changed) template:

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

(also available on jsfiddle)

Thanks for the help!

Edit: Second thought, this didn’t work, at least not when the update happens after some time. Goddamn it.
Edit: Updated to fixed version, yay.