Ractive isn't capturing a change from jquery-ui datepicker

I'm using jquery-ui's datepicker with a Ractive template, and the two-way binding doesn't seem to be working properly.

My input looks like this:

<input type="text" value="{{value}}" decorator="picker">

Then I'm instantiating the date picker through the "picker" decorator:

decorators: {
            picker: function(node) {
                $(node).datepicker();
                return {
                    teardown: function() {
                        $(node).datepicker("destroy");
                    }
                };  
            },
        }

The datepicker shows up perfectly, but value doesn't get updated properly. If I through and observer on {{value}} I see that Ractive doesn't think the value has changed once it's been set by the datepicker. If I click into the field, and back off again (losing focus), the observer triggers, and the value is set.

In my decorator I can setup a callback to trigger using the datepickers "onSelect" event, but how do I force a ractive change event from the decorator function?

decorators: {
    picker: function(node) {
        $(node).datepicker({
                onSelect: function(dateValue) {
                    console.log("datevalue set");
                    //I've tried this already
                    $(node).change();
                    //and
                    $(node).trigger("change");
                    //neither work
                }
        });
        return {
            teardown: function() {
                $(node).datepicker("destroy");
            }
        };  
    },
}

Solution

In the decorator function, this refers to the current ractive instance, so you can call ractive.updateModel() to let it know the model needs to be updated based on the view:

decorators: {
    picker: function(node) {
        var ractive = this
        $(node).datepicker({
                onSelect: function(dateValue) {
                    ractive.updateModel()
                }
        });
        return {
            teardown: function() {
                $(node).datepicker("destroy");
            }
        };  
    },
}

(See http://jsfiddle.net/arcca09t/)

Edited

The current version of ractive use the as-* convention for decorators, you should edit the html like this:

<input type="text" value="{{value}}" as-picker>