Question

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

视图模型：

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>

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

我尝试使用以下方式直接访问该属性：

disable: IsAnnualLeave

然而，这不起作用。这是一个jsfiddle：http://jsfiddle.net/Lm5zyLvg/5/

Answer 1

但是，我想了解如何访问下拉列表中当前选定的项目，而不是总是从数组中的第三项获取值。

如果要访问下拉列表中的所选项目，则必须定义一个包含所选项目值的observable。

 self.selected=ko.observable();

之后你必须告诉ko将它与值绑定绑定。

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

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

我不知道AssignmentID是否是可观察的，但如果不是你必须让它可观察到。然后你可以访问它。以下是您的示例：Sample observableArray selection

我想要完成的是当我的网页加载现有数据时，仅当当前所选项目具有可观察到的IsAnnualLeave＆＃39;时，才能禁用整个下拉控件。设置为＆＃39; true＆＃39;。

更新2：

问题是如何处理选择更改和更新所选元素禁用属性与淘汰赛。您可以使用事件绑定。

event:{change:$root.evnt}

在viewModel中你只是简单地说：

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

}

在您的情况下，您必须绑定ko.observable中的选定项并绑定更改事件。然后，您可以修改您的选择项属性。您可以将observable绑定到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绑定到所选值，这意味着需要额外的工作。首先，您必须迭代observableArray，然后检查项IsAnnualLeave属性是否为false。然后看到选择。

新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

最后的小提琴：Final

使用knockoutjs observable禁用整个下拉列表

1 个答案: