使用 knockoutjs observable 禁用整个下拉菜单

Question

我有以下代码，它表示一个 Viewmodel 和关联的 HTML 以使用 Knockout.js 显示。如果 'IsAnnualLeave' 为真，我想弄清楚如何禁用整个下拉控件（不仅仅是单个 select 项）。

视图模型：

function viewModel(){

    var self=this;

    self.TimeEntryAssignmentViewModels = ko.observableArray();

    self.TimeEntryAssignmentViewModels.push(new TimeEntryAssignmentViewModel(1, 'Test 1', false));
    self.TimeEntryAssignmentViewModels.push(new TimeEntryAssignmentViewModel(2, 'Test 2', false));
    self.TimeEntryAssignmentViewModels.push(new TimeEntryAssignmentViewModel(3, 'Test 3', true));

    function TimeEntryAssignmentViewModel(AssignmentID, CodeName, IsAnnualLeave) {
        var self = this;
        this.AssignmentID = ko.observable(AssignmentID);
        this.CodeName = ko.observable(CodeName);
        this.IsAnnualLeave = ko.observable(IsAnnualLeave);
    }
}

ko.applyBindings(new viewModel());

HTML:

<select class="form-control" data-bind="options: TimeEntryAssignmentViewModels,
            optionsValue: 'AssignmentID', optionsText: 'CodeName',
            value: 3, optionsCaption: '-- please select --',
            disable: IsAnnualLeave "></select>

如何在我的可观察数组 'viewModel.TimeEntryAssignmentViewModels' 中引用当前项才能执行此操作？

我试过直接使用属性访问：

disable: IsAnnualLeave

然而，那是行不通的。这是一个 jsfiddle：http://jsfiddle.net/Lm5zyLvg/5/

Answer 1

However, I would like to work out how to access the currently selected item in the dropdown rather than always getting the value from the third item in the array.

如果您想访问下拉列表中的 selected 项目，您必须定义一个包含 selected 项目值的可观察对象。

 self.selected=ko.observable();

之后你必须告诉 ko 用值绑定来绑定它。

<select data-bind="options:List,value:selected"></select>

然后您可以从您的 ViewModel 访问它。在你的情况下你已经绑定了一个值 value: AssignmentID.

我不知道 AssignmentID 是否可观察，但如果不是，则必须使其可观察。然后就可以访问了。这是给您的示例：Sample observableArray selection

What I'm trying to accomplish is to disable the entire dropdown control when my web page loads existing data only when the currently selected item has the observable of 'IsAnnualLeave' set to 'true'.

更新二：

问题是如何处理 select 离子变化和更新 selected 元素禁用属性与敲除。您可以为此使用事件绑定。

event:{change:$root.evnt}

在 viewModel 中，您只需：

    self.evnt=function()
{
    //change logic here.

}

在您的情况下，您必须在 ko.observable 中绑定 selected 项目并绑定更改事件。然后你可以修改你的select项属性。您可以将可观察对象绑定到 html 元素的可见和禁用属性。

完整代码如下： Html:

<select data-bind="options: TimeEntryAssignmentViewModels,optionsValue: 'IsAnnualLeave', optionsText: 'CodeName',disable:dis,value:selected,event:{change:$root.evnt}"></select>

javascript:

function viewModel(){

var self=this;
    self.TimeEntryAssignmentViewModels = ko.observableArray();

self.TimeEntryAssignmentViewModels.push(new TimeEntryAssignmentViewModel(1, 'Test 1', false));
self.TimeEntryAssignmentViewModels.push(new TimeEntryAssignmentViewModel(2, 'Test 2', false));
self.TimeEntryAssignmentViewModels.push(new TimeEntryAssignmentViewModel(3, 'Test 3', true));

self.selected=ko.observable();
self.dis=ko.observable(false);

self.evnt=function()
{
    if(self.selected()){
    self.dis(true);
    }
}

function TimeEntryAssignmentViewModel(AssignmentID, CodeName, IsAnnualLeave) {
    var self = this;
    this.AssignmentID = ko.observable(AssignmentID);
    this.CodeName = ko.observable(CodeName);
    this.IsAnnualLeave = ko.observable(IsAnnualLeave);
}

}

ko.applyBindings(new viewModel());

jsfiddle文件：NewJsFiddle

更新 3

好吧，如果您绝对想将 AssignmentID 绑定到 selected 值，这意味着一些额外的工作。首先，您必须迭代您的 observableArray，然后检查是否有任何项目 IsAnnualLeave 属性为假。然后可见 select.

新 Html:

<select data-bind="options: TimeEntryAssignmentViewModels,optionsValue: 'AssignmentID', optionsText: 'CodeName',disable:dis,value:selected,event:{change:$root.evnt}"></select>

更改 ViewModel 中的 evnt 函数：

self.evnt=function()
{
     ko.utils.arrayForEach(self.TimeEntryAssignmentViewModels(), function(item) {
    var value = item.IsAnnualLeave();
         if(value){
         self.dis(true);
         }
});

ko.utils.arrayForEach 是您所需要的。你可以在这里找到很多关于 utils 的信息：Utils

最后的fiddle:Final

使用 knockoutjs observable 禁用整个下拉菜单

Disable entire dropdown with knockoutjs observable

knockout.js

drop-down-menu