带有knockout.js 数据绑定的Bootstrap 日期选择器 [英] Bootstrap datepicker with knockout.js databind

问题描述

这个问题类似于 knockoutjs databind with jquery-ui datepicker，但我想用Bootstrap datepickers 之一.

This question is similar to knockoutjs databind with jquery-ui datepicker, but instead of the jQueryUI datepicker, I would like to use one of the Bootstrap datepickers.

Bootstrap datepicker 的 API 与 jquery-ui 不同，而且我在用knockout.js 使其工作时遇到了一些麻烦.我创建了 一个 jsFiddle 来尝试一下.

The API for the Bootstrap datepicker is different from jquery-ui, and I am having some trouble wrapping my head around making it work with knockout.js. I have created a jsFiddle to try it out.

似乎 Bootstrap 日期选择器使用起来更简单，因为它不独立存储日期.但是，我想知道 jsFiddle 是否是将 Bootstrap 日期选择器小部件与 knockout.js 一起使用的合适方法，即

It seems like the Bootstrap datepicker could be much simpler to use because it does not independently store the date. However, I would like to know how whether the jsFiddle is the appropriate way to use the Bootstrap datepicker widget with knockout.js i.e.

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
      //initialize datepicker with some optional options
      var options = allBindingsAccessor().datepickerOptions || {};
      $(element).datepicker(options);

      ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).datepicker("destroy");
        });
    },
    update: function(element, valueAccessor) {
    }
};

推荐答案

以下是一个示例，说明如何使用您正在使用的日期选择器完成此任务:

Here is a sample of how you could accomplish this with the datepicker that you are using:

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
      //initialize datepicker with some optional options
      var options = allBindingsAccessor().datepickerOptions || {};
      $(element).datepicker(options);

      //when a user changes the date, update the view model
      ko.utils.registerEventHandler(element, "changeDate", function(event) {
             var value = valueAccessor();
             if (ko.isObservable(value)) {
                 value(event.date);
             }                
      });
    },
    update: function(element, valueAccessor)   {
        var widget = $(element).data("datepicker");
         //when the view model is updated, update the widget
        if (widget) {
            widget.date = ko.utils.unwrapObservable(valueAccessor());
            if (widget.date) {
                widget.setValue();            
            }
        }
    }
};

看起来没有任何破坏功能，所以我删除了那部分.当用户更改日期时，它会处理小部件 changeDate 事件以更新视图模型.update 函数处理视图模型何时更改以更新小部件.

It did not look like there was any destroy functionality, so I removed that piece. This handles the widgets changeDate event to update the view model, when a user changes the date. The update function handles when the view model is changed to update the widget.

如果你想把值绑定到一个不可观察的对象，那么需要多一点代码.如果这是您需要支持的内容，请告诉我.

If you want to bind the value to a non-observable, then it would take a little more code. Let me know if that is something that you need to support.

http://jsfiddle.net/rniemeyer/KLpq7/

这篇关于带有knockout.js 数据绑定的Bootstrap 日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！