如何访问自定义敲除绑定中的变量答案

【问题标题】：How to access variables inside custom knockout binding如何访问自定义敲除绑定中的变量
【发布时间】：2015-09-03 22:53:08
【问题描述】：

所以我正在使用这个日期选择器库。 http://eonasdan.github.io/bootstrap-datetimepicker/Installing/#knockout

有没有办法让我从处理程序中获取值并将其保存在我的视图模型中？我想在我的视图模型内的处理程序之外公开var picker = $(element).data('DateTimePicker'); 的值。这可能吗？

/*globals Hilary*/
Hilary.scope('learn').register({
    name: 'DatetimeVM',
    dependencies: ['ko', 'jQuery', 'moment', 'OptionSelectVM'],
    factory: function (ko, $, moment, OptionSelectVM) {
        'use strict';

        return function (date) {
            var self = {
                date: {
                    type: ko.observable(),
                    start: ko.observable(),
                    end: ko.observable()
                }
            };

            if(!ko.bindingHandlers.dateTimePicker) {
                ko.bindingHandlers.dateTimePicker = {
                    init: function (element, valueAccessor, allBindingsAccessor) {
                        //initialize datepicker with some optional options
                        var viewOptions = allBindingsAccessor().dateTimePickerOptions || {},
                            options;

                        options = $.extend({
                            inline: true,
                            debug: true
                        }, viewOptions);

                        $(element).datetimepicker(options);

                        //when a user changes the date, update the view model
                        ko.utils.registerEventHandler(element, 'dp.change', function (event) {
                            var value = valueAccessor();
                            if (ko.isObservable(value)) {
                                if (event.date !== null && !(event.date instanceof Date)) {
                                    value(event.date.toDate());
                                } else {
                                    value(event.date);
                                }
                            }
                        });

                        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                            var picker = $(element).data('DateTimePicker');

                            if (picker) {
                                picker.destroy();
                            }
                        });
                    },
                    update: function (element, valueAccessor) {
                        var picker = $(element).data('DateTimePicker');

                        //when the view model is updated, update the widget
                        if (picker) {
                            var koDate = ko.utils.unwrapObservable(valueAccessor());

                            //in case return from server datetime i am get in this form for example /Date(93989393)/ then fomat this
                            // koDate = (typeof (koDate) !== 'object') ? new Date(parseFloat(koDate.replace(/[^0-9]/g, ''))) : koDate

                            picker.date(koDate);
                        }
                    }
                };
            }

            return self;
        };
    }
});

【问题讨论】：

标签： javascript jquery knockout.js bootstrap-datetimepicker

【解决方案1】：

是的，你可以！查看the custom bindings documentation，传递给绑定处理程序的init 和update 函数的参数比您当前使用的要多，包括第四个参数viewModel 用于pre Knockout 3.x，bindingContext 用于3 .x 版本。

来自上述文档：

viewModel — 此参数在 Knockout 3.x 中已弃用。请改用bindingContext.$data 或bindingContext.$rawData 访问视图模型。

bindingContext — 一个对象，其中包含可用于此元素绑定的绑定上下文。此对象包括特殊属性，包括 $parent、$parents 和 $root，可用于访问与此上下文的祖先绑定的数据。

但请注意，这会创建一个依赖从您的处理程序到特定视图模型，恕我直言，这通常是一个危险信号。在绑定处理程序应该知道的当前视图模型上显式传递 observable 或回调可能会更好，因此您可以编写例如：

<div data-bind="datepicker: { date: myDate, additionalData: someObservable }"></div>

【讨论】：