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

时间:2015-09-03 22:53:09

标签: javascript jquery knockout.js bootstrap-datetimepicker

所以我正在使用这个日期选择器库。 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;
        };
    }
});

1 个答案:

答案 0 :(得分:1)

是的,你可以!查看the custom bindings documentation,您的绑定处理程序initupdate功能传递的参数比您当前正在使用的更多,包括第四个被调用的参数{0}用于预先淘汰3.x,viewModel用于3.x版本。

来自上述文件:

  
      
  • bindingContext - 在Knockout 3.x中不推荐使用此参数。请改用viewModelbindingContext.$data来访问视图模型。
  •   
  • bindingContext.$rawData - 保存此元素绑定可用的绑定上下文的对象。此对象包括特殊属性,包括bindingContext$parent$parents,可用于访问绑定到此上下文的祖先的数据。
  •   

请注意,这会从处理程序特定视图模型创建依赖,这通常是一个红旗恕我直言。在绑定处理程序应该知道的当前视图模型上显式传递observable或回调可能更好,所以你可以编写例如:

$root