Bootstrap datepicker与knockout.js databind [英] Bootstrap datepicker with knockout.js databind

问题描述

这个问题类似于使用jquery-ui datepicker 的knockoutjs databind，而不是jQueryUI datepicker，我想使用引导日期检查器之一。

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 datepicker可以使用起来更简单，因为它不独立存储日期。但是，我想知道jsFiddle是否是使用带有knockout.js的Bootstrap datepicker小部件的适当方法，即

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 事件以更新视图模型。

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.

如果要绑定该值，则 c>更新函数处理视图模型更新到一个不可观察的，那么它将需要更多的代码。让我知道这是否需要您支持。

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/

这篇关于Bootstrap datepicker与knockout.js databind的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！