Ractive没有从jquery-ui datepicker捕获更改

Question

我正在使用带有Ractive模板的jquery-ui的datepicker,并且双向绑定似乎没有正常工作.

我的输入如下:

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

然后我通过"picker"装饰器实例化日期选择器:

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

datepicker完美显示,但值无法正确更新.如果我通过和{{value}}上的观察者,我发现Ractive一旦认为该值已经由datepicker设置,就不会改变.如果我单击该字段并再次退回(失去焦点),则观察者触发,并设置该值.

在我的装饰器中,我可以设置一个回调来触发使用datepickers"onSelect"事件,但是如何从装饰器函数强制执行ractive change事件？

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

在decorator函数中,this指的是当前ractive实例,因此您可以调用ractive.updateModel()以让它知道需要根据视图更新模型:

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

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