RivetsJS：使用 jQuery-ui Datepicker 更新模型答案

【问题标题】：RivetsJS: Update model with jQuery-ui DatepickerRivetsJS：使用 jQuery-ui Datepicker 更新模型
【发布时间】：2015-12-16 21:19:43
【问题描述】：

我是rivets.js 的新手，我喜欢它！当其他完整的框架如 AngularJS 太重时，在微站点或小代码片段中非常有用。

我可以让它在所有情况下都能工作，除非输入值通过 jQuery 插件更改，在这种特殊情况下是 Datepicker。

rivets.configure({ prefix: "data-rv", templateDelimiters: ['{{', '}}'] });
var $data = {CDP:null};

rivets.bind($("#toBind"), { data: $data }); 

function Datepicker(selector, context) {
            //
            $(selector, context).datepicker().keyup(function (e) {
                if (e.keyCode == 8 || e.keyCode == 46) {
                    $.datepicker._clearDate(this);
                }
            })
        }
        
$data.CDP = {LastDeliveryDate: "01/01/2015"};

Datepicker(".date");

<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.8.1/rivets.bundled.min.js"></script>
<div id="toBind">
  <input type="text" class="form-control date" id="txtDeliveryDate" placeholder="dd/mm/yyyy" data-rv-value="data.CDP.LastDeliveryDate">
  <span id="showText">{{data.CDP.LastDeliveryDate}}</span>
</div>

这里是小提琴：https://jsfiddle.net/sLdvegdo/2/

如您所见，使用 Datepicker 选择的值更改不会更新模型，但手动输入会。

有什么想法吗？

【问题讨论】：

标签： rivets.js jquery jquery-ui jquery-ui-datepicker rivets.js

【解决方案1】：

它不起作用的原因是rv-value binder 通过侦听input 事件（旧版本为change）来工作

您可以通过手动触发事件onSelect 来解决此问题，如下所示：

rivets.configure({
  prefix: "data-rv",
  templateDelimiters: ['{{', '}}']
});
var $data = {
  CDP: null
};

rivets.bind($("#toBind"), {
  data: $data
});

function Datepicker(selector, context) {
  //
  $(selector, context).datepicker({
    onSelect: function(date) {
      $(this).trigger('input');
    }
  }).keyup(function(e) {
    if (e.keyCode == 8 || e.keyCode == 46) {
      $.datepicker._clearDate(this);
    }
  })
}

$data.CDP = {
  LastDeliveryDate: "01/01/2015"
};

Datepicker(".date");

<link href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.8.1/rivets.bundled.min.js"></script>
<div id="toBind">
  <input type="text" class="form-control date" id="txtDeliveryDate" placeholder="dd/mm/yyyy" data-rv-value="data.CDP.LastDeliveryDate">
  <span id="showText">{{data.CDP.LastDeliveryDate}}</span>
</div>

【讨论】：

谢谢！我是个白痴...我尝试在“更改”上触发“输入”事件但监听元素。好久没用jQuery-ui了……再次感谢！

【解决方案2】：

通过手动触发“输入”事件，TJ 是正确的，但是我在日期选择器中使用了 onChange 事件，效果很好。也许它可以帮助某人。

    $('.datepicker').datepicker({ autoclose: true, todayHighlight: true, orientation: 'bottom' })
.on('changeDate', function () { $(this).trigger('input'); });

【讨论】：