Handlebar Bound Helper : setter

1

I made a very basic helper to render a <input type="date" /> with a formatted date.

It renders fine, but when I change the date, the supposedly bound value is not updated.

Here’s a fiddle to demonstrate my problem.

2

I think, you just created markup whithout any bindings. But you’re on the right way. You can use custom components or views. See this article http://emberjs.com/guides/components/wrapping-content-in-a-component.

3

Thanks @midd for your answer. So I’m trying with a component (see Fiddle).

The value of the input is set correctly, but it can’t figure how to make it work the other way around, that is update the bound date when you select another date in the datepicker

Here’s my component :

// Template
<script type="text/x-handlebars" data-template-name="components/date-picker">
    <input type="date" class="form-control" {{bind-attr value=value}}/>
</script>

// JS
App.DatePickerComponent = Em.Component.extend({
    attributeBindings: ['value'],
    
    value: function(key, value) {
        var date = this.get('date'),
            format = this.get('format') || 'YYYY-MM-DD';
        
        if ( value ) {
            this.set('date', moment(value).toISOString());
            return value;
        } else {
            return moment(date).format(format);
        }
    }.property('date')
});

From what I understand, the attributeBindings indicates that the component’s value property is bound to the template’s value attribute.
Is that correct ?
And then is the {{bind-attr value=value}} necessary ?
Should I have an observer on value in order to update date when value changes ?

4

I solved my problem !

I ended up with a view that renders the input date (no need for a template) :
{{view 'date_picker' dateBinding=myDate}}

Here’s a working Fiddle !

I had a hard time with the binding, because it appears that MyView.value is not bound to the input value attribute, although I set attributeBindings in my view.

Therefore, it is useless to set an observer on value. Or to use the value computed property as a setter.

I had to fetch the input’s actual value with jQuery $().val() and handle the change event in my view, so it would update my date property which is bound to the controller’s myDate property.

Edit: this was probably the issue with the component… Guess I’ll have to try that.

Maybe there’s a better way ?

5

That was it. Here’s a working Fiddle for the Date Picker Component.

Hope it helps.