在ember.js中，如何在3个组件之间绑定属性？

Question

My JS file for my-textfield looks like this:

import layout from '../templates/components/my-textfield';

export default Ember.component.extend({
  id: '',
  layout,
  tagName: ''
});

My handlebars file for my-textfield looks like this:

<div>
  {{my-textfield/input id=id}}
  {{my-textfield/label for=id}}
</div>

My JS file for my my-textfield/input looks like this:

export default Ember.TextField.extend({});

If I use my component with an ID {{my-textfield id="rawr"}} , I get the following output:

<div>
  <input id="rawr" class="ember-text-field ember-view">
  <span class="ember-view" for="rawr"></span>
</div>

If I don't pass an ID into my component {{my-textfield}} , Ember.TextField will generate its own ID.

<div>
  <input id="ember3972" class="ember-text-field ember-view">
  <span class="ember-view" for></span>
</div>

I'm trying to make it so when the ID gets generated, that the for attribute in the span will be updated with the same value.

I expected it to happen automatically since they all point to the same property on my component. But since it didn't, I've been trying to figure out how bind them all together for a while. I found out about the mut helper and tried using that like so:

<div>
  {{my-textfield/input id=(mut id)}}
  {{my-textfield/label for=id}}
</div>

but that didn't work. That just made all of my IDs in every component be the same.

What do I need to do here to make this work?

Answer 1

It is a very interesting question. I think I can solve your problem but I'm not sure how does your my-textfield component works but here is how I would solve this. I would have a component my-textfield with following .hbs file:

<div>
  <input id={{id}} />
  <label for={{id}}></label>
</div>

And just pass id to this component while calling it.

{{my-textfield id="someId"}}

Now, lets say for some reason you are not able to take above mentioned approach and you want to proceed like:

<div>
  {{my-textfield/input id=id}}
  {{my-textfield/label for=id}}
</div>

You can either use jQuery to get ID of the sibling element, I would assume you know how. Or you can access the id for the component using this.elementId in the component.js or as {{this.elementId}} in component.hbs , you should then be able to pass around this value and use it as required.

Answer 2

Your my-textField does not have a tagName ; which means ember will not generate an id for it; hence when you do not pass an id attribute to it the following does not make any sense:

  {{my-textfield/input id=id}}
  {{my-textfield/label for=id}}

id is not defined; what are you passing to the children components? Simply an undefined value.

Please check what I did in the following twiddle . I defined my-textfield to have a div tag and let ember generate an id for it. Afterwards, I declared a computed property ( idToPass ) within my-textfield.js file and pass that as id of my-textfield/my-input component and as for of my-textfield/my-label component within my-textfield.hbs file. By this way; I made sure a controlled id is assigned to my-input via Ember's auto generated id for my-textfield and the same value is passed to my-label as for attribute.