问通过knckoutjs单选按钮禁用jquery数据报警器
EN

Stack Overflow用户

提问于 2015-07-06 07:09:54

回答 1查看 63关注 0票数 0

在我的应用程序中的无线电选项返回三个值全天，上午和半天。如何将绑定为只在选中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
        }
    });
});

knockout.js

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-07-06 10:23:43

首先，我在视图模型中添加了一个可观察的名为dateRangeButton的视图。此可观察到的对象将持有由日期范围选择器插件创建的动态生成的jQuery选择器：

this.dateRangeButton = ko.observable();

然后，我向视图模型添加了一个名为enableDisableDateRange的函数。调用时，此函数将根据disabled是否等于“allday”向日期范围选择器按钮添加或删除holidayType属性：

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

如何获得日期范围选择器按钮？我创建了一个自定义绑定，它将日期范围选择器应用于元素，并填充视图模型中可观察到的dateRangeButton：

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函数发生变化时，它将调用该函数：

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

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

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