1

我将 jquery-ui 的 datepicker 与 Ractive 模板一起使用，双向绑定似乎无法正常工作。

我的输入如下所示：

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

然后我通过“picker”装饰器实例化日期选择器：

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

日期选择器完美显示，但值没有正确更新。如果我在 {{value}} 上通过观察者，我会看到 Ractive 认为该值在由 datepicker 设置后并没有改变。如果我单击该字段，然后再次退出（失去焦点），观察者将触发，并设置值。

在我的装饰器中，我可以设置一个回调以使用 datepickers“onSelect”事件触发，但是如何从装饰器函数强制执行一个积极的更改事件？

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

2 回答 2

8

在装饰器函数中，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>
于 2014-10-01T21:42:04.450 回答
1

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>

于 2017-10-08T21:01:38.503 回答