Отключить всплывающее окно с наблюдаемым нокаутом

Question

У меня есть следующий код, который представляет Viewmodel и связанный HTML для отображения с помощью Knockout.js. Я хотел бы выяснить, как отключить весь элемент управления выпадающим списком (а не только один элемент select), если «IsAnnualLeave» истинно.

ViewModel:

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

Однако, я хотел бы работать, как получить доступ выбранного элемента в выпадающем списке, а не всегда получает значение из третьего элемента массива.

Если вы хотите получить доступ к выбранному элементу в выпадающем списке, вы должны определить наблюдаемое, которое удерживает выбранные значения элементов.

self.selected=ko.observable(); 

После этого вы должны указать ko, чтобы связать это с привязкой к значению.

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

Тогда вы можете получить к нему доступ с помощью ViewModel. В вашем случае вы уже привязали значение value: AssignmentID.

Я не знаю, является ли наблюдаемый AssignmentID, но если его нет, вы должны сделать его наблюдаемым. Затем вы можете получить к нему доступ. Вот пример для вас: Sample observableArray selection

То, что я пытаюсь выполнить, чтобы отключить полный контроль выпадающего когда мои загрузки страницы веб существующих данных только тогда, когда выбранный элемент имеет наблюдаемый «IsAnnualLeave» установлен 'правда'.

Update 2:

Проблема заключается в том, как справиться с изменением выбора и обновления выбранных элементов отключить свойство с нокаута. Для этого вы можете использовать привязку событий.

event:{change:$root.evnt} 

И в ViewModel вы просто:

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

} 

В вашем случае вы должны привязать выбранный элемент в ko.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

Update 3

Ну, если вы абсолютно хотите связать AssignmentID к выбранному значению, что означает немного дополнительной работы. Сначала вам нужно выполнить итерацию вашего наблюдаемого массива, а затем проверить, является ли какое-либо из элементов IsAnnualLeave свойством false. Затем отобразится выбор.

новый Html:

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

изменение функции EVNT в ViewModel:

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

ko.utils.arrayForEach является то, что вам нужно. Вы можете найти много информации о утилитах здесь: Utils

И окончательной скрипка: Final