mercredi 30 septembre 2015

Best practices for the input helper in new Ember components

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.




Aucun commentaire:

Enregistrer un commentaire