Question

我使用带有Ractive模板的jquery-ui的datepicker，双向绑定似乎没有正常工作。

我的输入如下：

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

然后我通过＆＃34;选择器＆＃34;来实例化日期选择器。装饰器：

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

日期选择器完美显示，但值未正确更新。如果我通过{{value}}上的观察者，我发现Ractive一旦认为该值已经由日期选择器设置，就不会改变。如果我单击该字段，然后再次退回（失去焦点），观察者将触发，并设置该值。

在我的装饰师中，我可以设置一个回调来触发使用datepickers＆＃34; onSelect＆＃34;事件，但如何从装饰器功能强制执行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

在装饰器功能中，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/）

被修改

当前版本的ractive使用as- *约定装饰器，你应该像这样编辑html：

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

Answer 2

ractive不再使用类似的装饰器属性。但是，martypdx的建议让我朝着正确的方向前进。

$(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>

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

2 个答案:

被修改