Question

我的应用程序中的无线电选项会在早晨和半天返回三个值。如何绑定我的jquery日期选择器，使其仅在选择allday时启用。

var viewModel = function () {
    this.holidayType = ko.observable();
    this.allday = ko.computed(
        {
            read: function () {
                return this.holidayType() == "allday";
            },
            write: function (value) {
                if (value)
                    this.holidayType("allday");
            }
        }, this);
    this.morning = ko.computed(
     {
    read: function () {
        return this.holidayType() == "morning";
    },
    write: function (value) {
        if (value)
            this.holidayType("morning");
    }
    }, this);
    this.afternoon = ko.computed(
    {
        read: function () {
        return this.holidayType() == "afternoon";
    },
    write: function (value) {
     if (value)
        this.holidayType("afternoon");
    }
    }, this);
};
ko.applyBindings(new viewModel());

$(function () {
    $("#e1").daterangepicker({
        datepickerOptions: {
            minDate: 0
        }
    });
});

Answer 1

首先，我在您的viewmodel中添加了一个名为dateRangeButton的可观察对象。这个observable将为日期范围选择器插件创建的动态生成的<button>提供一个jQuery选择器：

this.dateRangeButton = ko.observable();

然后我在viewmodel中添加了一个名为enableDisableDateRange的函数。调用时，此函数会根据disabled是否等于“allday”来添加或删除holidayType属性到日期范围选择器按钮：

this.enableDisableDateRange = function(context) {
    context.dateRangeButton().prop('disabled', context.holidayType() != 'allday');
}

我们如何获得日期范围选择器按钮的选择器？我创建了一个自定义绑定，它将日期范围选择器应用于元素并填充viewmodel中的dateRangeButton observable：

ko.bindingHandlers.datePicker = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // apply the date range picker
        $(element).daterangepicker({
            datepickerOptions: {
                minDate: 0
            }
        });
        // tell the viewmodel where the date range picker button is
        bindingContext.$data.dateRangeButton($(element).next('button'));
        // enable or disable the button
        bindingContext.$data.enableDisableDateRange(bindingContext.$data);
    }
};

我将此绑定添加到将包含日期范围选择器的<input>元素：

<input id="e1" name="e1" data-bind="datePicker: ''">

最后，我向subscribe观察点添加了holidayType，enableDisableDateRange会随时调用holidayType函数：

this.holidayType.subscribe(function() {
    this.enableDisableDateRange(this);
}, this);

这是一个小提琴：http://jsfiddle.net/6cfb1dLg/

注意：这一切都取决于日期范围选择器如何排列它的UI。目前，它会在应用<button>元素后直接创建<input>元素。如果这发生了变化，那么我写的datePicker自定义绑定也必须进行修改。自定义绑定还假定存在名为dateRangeButton的可观察对象，并且视图模型中存在名为enableDisableDateRange的函数。

通过knckoutjs单选按钮

1 个答案: