Выключить выпадающий элемент выпадающего списка

В настоящее время я могу включить/отключить весь снимок, используя привязку enable в нокауте. Когда Enable = false, весь снимок больше не доступен для кликов, и пользователь не может видеть другие возможные значения в раскрывающемся списке.

<select data-bind="options: OptionsList, optionsText: 'Key', optionsValue: 'Value', value: FieldValue, enable: Enable"></select>

что получилось:

<select disabled=""></select>

То, что я надеюсь сделать, это сделать что-то вроде этого

<select> 
<option disabled="disabled" value='1'>One </option> 
<option selected="select"   value='2'>Two </option> 
<option disabled="disabled" value='3'>Three </option>   
</select>

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

Я просмотрел опцииAfterRender в нокауте, но у меня больше нет доступа к выбранному значению. элемент, который передается, является только ключом и значением элемента select, а не наблюдаемым.

Любая помощь будет высоко оценена. Спасибо

ОТВЕТЫ

Ответ 1

Вы можете создать свои элементы option, используя foreach, например:

<select data-bind="value: selected, foreach: options">
    <option data-bind="attr: { disabled: !enabled(), value: value }, text: name"></option>
</select>

Пример: http://jsfiddle.net/rniemeyer/4PuxQ/

В противном случае, вот пример привязки optionsBind от Michael Best, который позволит вам привязать параметр без использования foreach (использует optionsAfterRender):

<select data-bind="value: selected, options: options, optionsText: 'name', optionsValue: 'value', optionsBind: 'attr: { disabled: !enabled() }`"></select>'

Образец: http://jsfiddle.net/rniemeyer/KxY44/

Ответ 2

Вам нужно использовать опцииAfterRender для применения отключенных к параметрам. Он обсуждался в документации: http://knockoutjs.com/documentation/options-binding.html

<select data-bind="options: OptionsList, optionsText: 'Key', optionsValue: 'Value', value: FieldValue, optionsAfterRender: setOptionDisable"></select>

self.setOptionDisable = function(option, item) {
    ko.applyBindingsToNode(option, {disable: item.disable}, item);
}

Вот демонстрационная работа: http://jsfiddle.net/vkFUC/

Ответ 3

Вы можете использовать опцииAfterRender для отключения параметров. Вам нужно предоставить еще одно наблюдаемое свойство объекта для включения или отключения опции.

Код: -

  //Optionlist will look like this 
  OptionsList: ko.observableArray([{
    Key: 1,
    Value: "Jack",
    disable: ko.observable(false)
  }, {
    Key: 2,
    Value: "Jhon",
    disable: ko.observable(false)
   }]),

    //Function will be used in optionsAfterRender 
    setOptionDisable: function (option, item) {
      ko.applyBindingsToNode(option, {
        disable: item.disable
      }, item);
    }

Скриншот

Ответ 4

Для версии 3.5.0, если вы хотите продолжать использовать решение mbest (которое я лично нахожу очень полезным и элегантным), просто замените ko.contextFor вызовом этого предложенного обходного пути из chrisknoll:

function contextForNodeOrNearestParent(node) {
    // Proposed fix for 3.5.0 ko.contextFor   https://github.com/knockout/knockout/pull/2447/files
    var context = ko.contextFor(node);
    if (!context && node.parentNode) {
        return contextForNodeOrNearestParent(node.parentNode);
    }
    return context;
}

Исходный пользовательский bindingHandler из mbest будет затем изменен следующим образом:

ko.bindingHandlers.optionsBind = {
    preprocess: function (value, key, addBinding) {
        addBinding('optionsAfterRender', 'function(option, item) { ko.bindingHandlers.optionsBind.applyBindings(option, item, ' + value + ') }');
    },
    applyBindings: function (option, item, bindings) {
        if (item !== undefined) {
            option.setAttribute('data-bind', bindings);
            //ko.applyBindings(ko.contextFor(option).createChildContext(item), option);
            ko.applyBindings(contextForNodeOrNearestParent(option).createChildContext(item), option);
        }
    }
};

Это работает для моего проекта, как шарм. И я публикую это здесь, на случай, если это может сэкономить кому-то время, и для дальнейшего личного использования.