Условно добавить атрибут элемента в knockout.js

Библиотека knockout.js имеет "attr" привязку данных, которая позволяет динамически изменять значение атрибута элемента HTML (например, "название" ). Однако в некоторых случаях атрибут может потребоваться или не понадобиться в зависимости от соответствующего наблюдаемого объекта. Например, если моя модель имеет "заголовок", наблюдаемый, я могу захотеть установить атрибут "title", если он присутствует (не нуль) или полностью пропускает атрибут, если он отсутствует (null).

Предоставляет ли нокаут какой-либо способ условно установить атрибут? (В идеале без условного отображения всего тега открытия элемента...)

[Примечание] Этот аналогично названный вопрос был фактически разрешен нокаутом специальной обработки классов CSS и не относится к этому вопросу (или его собственному названию): Как условно отобразить класс css с knockoutjs

Ответ 1

Мне это нужно, когда я выбирал (который я генерировал вручную вместо встроенного нокаута).

<option 
 data-bind="text: text, 
    attr:{
     value:value,
     'selected': typeof(selected) !== 'undefined' ? selected : null 
     }">
 Choice X
</option>

Это говорит о том, что всегда обновляется атрибут "текст" и добавляется атрибут "значение", но только добавляется "выбрано", если данные уже имеют значение "выбрано".

Ответ 2

Вы можете создать настраиваемую привязку attrIf, которая будет проверять значение определенного наблюдаемого логического значения перед добавлением или не атрибутами. См. Этот пример:

ko.bindingHandlers.attrIf = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var h = ko.utils.unwrapObservable(valueAccessor());
        var show = ko.utils.unwrapObservable(h._if);
        if (show) {
            ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor);
        } else {
            for (var k in h) {
                if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) {
                    $(element).removeAttr(k);
                }
            }
        }
    }
};

<a href="#" data-bind="attrIf: {title: title, _if: flag}">link</a>

Ответ 3

Связывание данных с нокаутом "attr" поддерживает этот сценарий, просто возвращает null или undefined из вашей функции getDisabledState(), тогда он не будет излучать атрибут.

Этот ответ был получен из привязки нокаута attr с такими атрибутами, как "readonly" и "disabled"

Ответ 4

Хотел бы я просто ответить на @gbs, но я не могу. Мое решение состояло бы в том, чтобы иметь два одинаковых элемента HTML: один с атрибутом, без него и условие нокаута, чтобы добавить одно из них в соответствии с элементом. Я также знаю об этом обычном ожидании, но какое из решений более эффективно?