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

Question

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");
}
};
},
}

Answer 1

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>

Answer 2

ractive no longer uses decorator attributes like that. But martypdx's suggestion sent me in the right direction.
$(function(){
var r = new Ractive({
el: document.body,
template: '#template',
data: {
value: null
},
decorators: {
picker: function(node) {
var ractive = this
$(node).datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateValue) {
ractive.updateModel()
}
});
return {
teardown: function() {
$(node).datepicker("destroy");
}
};
},
}
})
})
<script src="https://cdn.jsdelivr.net/npm/ractive#0.9.5/ractive.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script id='template' type='text/ractive'>
value: {{value}}
<br>
<input type="date" value="{{value}}" as-picker>
</script>