"setProperties" does not pass "attrs" as expected

[BenjaminHorn]

I have a wrapping component, which yields some other component in itself. (Think about form control group or a table cell component).

To make it as flexible as possible I pass attrs to the hash property. And all component will set hash on itself.

Ember.Component.reopen({
  init: function(){
    this._super();
    this.setProperties(this.get('hash'));
  }
});

http://jsbin.com/suvenijuxu/1/edit?html,js,output

It works fine with Strings but not with objects. In my-wrapper component attrs.model.name has the correct value (see the template), but after attrs is passed to the property hash and set by setProperties it is transformed to MutStream. (see console.log)

Why does this transformation happens? Is this the expected behavior? Is my approach considered as an anti-pattern? Is there a workaround? What does MutStream or MUTABLE_REFERENCE mean?

[rwjblue]

By default Ember has used two way data binding for a very long time. We are transitioning away from that, but at the moment we are still very much in two-way binding land.

The object you are seeing is a Mutable Object, and is how we represent two way bound attributes. They have a .value property and an .update method (using update is how to set the upstream source). At this point, we generally are not suggesting folks use this.attrs for much because of this confusion. The confusion will be cleared up when we migrate to angle bracket invocation and can change the default binding from two-way to one-way. See emberjs/rfcs#60 for details.

---

You can get your scenario working by forcing the model param to be readonly by using (readonly) subexpression to force one way binding: http://jsbin.com/lofoje/edit?html,js

[BenjaminHorn]

Thanks @rwjblue to taking the time explaining it. Unfortunately I don't see any different in your jsbin. {{model.name}} is still empty. (To be exact: not rendered and it is now a KeyStream ).

I thought about a different solution to my problem: A Helper will know everything about the parameters passed to it, but I don't know how to call a component from a helper. This used to worked but not anymore. (Since env is not passed)

    export default function(params, hash, options, env) {
      ...
      return env.helpers.component.helperFunction.call(this, ["my-component"], hash, options, env);
    }