Recommendations for using auxiliary input in new Ember components

Question

I am currently studying the new concept of Ember new-down, action-up for components. As discussed here , sometimes I want to allow a child component to explicitly change a property. Here is the muta helper: it creates a wrapper for the passed value containing the value (readonly?) And a function to update it. The example on this page is a simple button that increments the counter.

How does this concept work if I use the input helper inside the component? For example, suppose I create a form that 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 simply has the task of wrapping the input control, how do we properly use the passed mut object? Is this something like?

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

My thinking is: the value of the input element is set equal to the value of the mut object, and whenever the input value (HTML5 input event) changes, the mut method of the mut object is called to set the model property to a new value. Something seems to be wrong with my thinking, because it does not work. What is the “standard” way to do it now? I am using Ember 1.13.8.

Answer 1

In classic components (as opposed to flicker components), all bindings are mutable, so it is usually not recommended 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 the mut and attrs helper for flicker components, also called angle bracket components, that are not currently released in stable versions of Ember.js.