如何访问自定义销毁绑定中的变量

How to access variables inside custom knockout binding

本文关键字:绑定 变量 自定义 何访问 访问      更新时间:2023-09-26

所以我使用这个日期选择器库。http://eonasdan.github.io/bootstrap-datetimepicker/Installing/淘汰赛

是否有一种方法可以让我从处理程序中获取值并将其保存在视图模型中?我想在视图模型的处理程序外部公开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;
        };
    }
});

你可以!查看自定义绑定文档,传递给绑定处理程序的initupdate函数的参数比当前使用的要多,包括用于Knockout 3之前的第四个称为viewModel的参数。x, bindingContext为3。x版本。

从提到的文档:

  • viewModel -该参数在Knockout 3.x中已弃用。使用bindingContext.$databindingContext.$rawData来访问视图模型。
  • bindingContext -一个对象,用于保存该元素的绑定可用的绑定上下文。该对象包含$parent$parents$root等特殊属性,可用于访问与此上下文的祖先绑定的数据。
但是要注意,这会从你的处理程序特定的视图模型创建一个依赖,这通常是一个危险信号。显式地传递当前视图模型上的可观察对象或回调,绑定处理程序应该知道这些可能会更好,所以你可以这样写:
<div data-bind="datepicker: { date: myDate, additionalData: someObservable }"></div>