Best practices for the input helper in new Ember components

Question

I'm currently learning about Ember's new data-down, actions-up paradigm for components. As discussed here, however, sometimes I want to allow the child component to modify the property explicitly. This is where the mut helper comes in: it creates a wrapper for the passed in value, containing a (readonly?) value and a function to update it. The example on that page is for a simple button which increments a counter.

How does this concept work if I'm using the input helper inside a component? For example, let's say I'm building a form which consists of a bunch of special form components:

// templates/index.hbs
<form>
    {{form-control value=(mut model.firstValue)}}
    {{form-control value=(mut model.secondValue)}}
</form>

If the form-control component just has the task of wrapping the input control, how do we use the passed-in mut object correctly? Is it something like?

// templates/components/form-control.hbs
{{input type="text" value=attrs.value.value input=attrs.value.update}}

My thinking here: the value of the input element is set to the value of the mut object, and whenever the input value changes (HTML5 input event) the update method of the mut object is called to set the model property to the new value. It seems there's something wrong with my thinking though, because this doesn't work. What is the "standard" way of doing this now? I'm using Ember 1.13.8.

Answer 1

In classic components (as opposed to glimmer components), all bindings are mutable, so it is not generally necessary to use the mut helper. The following should work fine:

// templates/index.hbs
<form>
  {{form-control value=model.firstValue}}
  {{form-control value=model.secondValue}}
</form>

// templates/components/form-control.hbs
{{input type="text" value=value}}

The intended use of both the mut helper and of attrs is for glimmer components, also called angle bracket components, which are currently not released in Ember.js' stable releases.