yield & component helper => two way data binding not working ?

[plcarmel]

DEBUG: -------------------------------
DEBUG: Ember : 2.4.1
DEBUG: Ember Data : 2.4.0
DEBUG: jQuery : 2.2.1
DEBUG: -------------------------------

I don't know if this is a bug but it seems to contradict the documentation at
[http://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_nested-usage]

This is the example that is given:
{{yield (hash nameInput=(component "my-input-component" value=model.name placeholder="First Name"))}}

I tried it but without being able to achieve two way data binding.

To replicate the problem

templates/components/test-binding.hbs:
{{yield (component 'my-input' value=value)}}

templates/components/my-input.hbs:
{{input value=value}}

templates/application.hbs:

{{#test-binding value=value as |component|}}
  {{component component}}
{{/test-binding}}

value: {{value}}

A work-around

It works it the value is encapsulated inside a hash. Please note that the way I do it differs from the example in the documentation, which is not working.

templates/components/test-binding-2.hbs:
{{yield (component 'my-input-2' model=model)}}

templates/components/my-input-2.hbs:
{{input value=model.value}}

templates/application.hbs:

{{#test-binding-2 model=model as |component|}}
  {{component component}}
{{/test-binding-2}}

model.value: {{model.value}}

controllers/application.js:

import Ember from 'ember';
export default Ember.Controller.extend({
  model: { value: 'Hello world' }
});

[GCorbel]

Can you try simply :

{{#test-binding value=value as |component|}}
  {{component}}
{{/test-binding}}

value: {{value}}

I find {{component component}} a bit weird.

[plcarmel]

From the same documentation:

"Contextual components are created using the nested form of the component helper, and may be passed attrs and positional params. Contextual components must be invoked with a . in their path, unless they are being passed to the invoking {{component helper."

[pixelhandler]

@plcarmel can you create an ember-twiddle example that demonstrate the issue? Also I'm curious if 2-way binding is supposed to function, the docs mention binding, but not 2-way.

[plcarmel]

In the example given, a (custom) input component is used. So, it is implicit that two way binding should work in that example. There is no action registered on the component so one-way data binding would render the component useless.

Anyway, things need to be clarified. I will create the Ember Twiddle soon (one week max), stay tuned.

[courajs]

I may have found the same bug. I don't think yield is a factor here. Here's my reduced test case: Twiddle. Let me know if you think this is the same issue.

[courajs]

@Serabe You have a lot of knowledge on (component right?

[Serabe]

Looking into it

[plcarmel]

Yes, I think this is the same issue.

[Serabe]

TL;DR Found the issue. I think I fixed it but a few more tests are needed. I hope to have it done pretty soon.

For normal component invocation, Ember adds a mut automatically. Sadly, this does not happen for contextual components. I am adding a compiler plugin for doing so, but needs more testing before being published.

If everything goes ok, I hope to have it finished before next week. But again, only if everything goes ok.

[courajs]

@Serabe Thanks for the update, and for working on it :)

[krisselden]

If you manually use value=(mut model.name) does it work?

[Serabe]

Yes, it does. The problem is fixed but I need testing it a bit more before pushing a PR

[Serabe]

Fixed in #13177