10.01.2018

Биндинг «attr» — Knockout.js

Назначение

Биндинг attr предоставляет общий способ установки значений для любых атрибутов у связанного DOM-элемента. Это удобно, чтобы например подставить значение атрибута title элемента, src у тега img или href у ссылки на основе значений вашей модели представления, и автоматически обновлять их, когда свойства модели меняются.

Пример

<a data-bind="attr: { href: url, title: details }">
    Отчет
</a>
 
<script type="text/javascript">
    var viewModel = {
        url: ko.observable("year-end.html"),
        details: ko.observable("Отчет включая статистику за конец текущего года")
    };
</script>

Это установит атрибут href элемента на значение year-end.html и всплывающую подсказку элемента в атрибуте title на значение Отчет включая статистику за конец текущего года.

Параметры

  • Основной параметр
    Вы должны передать JavaScript объект, в котором имена свойств соответствуют именам атрибутов, а значения свойство соответствуют значениям атрибутов, которые хотите применить. Если ваш параметр ссылается на observable значение, биндинг будет обновлять атрибут при изменении observable значения. В ином случае, атрибут будет установлен единожды и не будут обновляться в будущем.
  • Дополнительные параметры
    • Нет

Примечание: Применение атрибутов, чьи имена нарушают ограничения имен переменных в JavaScript

Если хотите применить атрибут data-something, вы не можете написать так:

<div data-bind="attr: { data-something: someValue }">...</div>

… потому что data-something не является корректным именем идентификатора в данном месте кода. Решение простое: оберните имя идентификатора в кавычки, так оно станет строковым литералом, который не нарушает ограничений JavaScript по отношению к литералу объекта. Например,

<div data-bind="attr: { 'data-something': someValue }">...</div>

Примечание: Использование зарезервированных имен в качестве имен атрибутов в старых браузерах

В старых браузерах (ie8 и ниже) использование зарезервированных javascript слов в виде имен атрибутов вызывает ошибку. Можно обойти эту проблему, обернув название в кавычки:

<input data-bind="attr: { 'for': someValue }" />

Вы можете найти хороший список зарезервированных слов на странице Mozilla MDN здесь.

Зависимости

Нет, кроме ядра библиотеки Knockout.


Эксклюзивно для сайта skv1991.ru

Перепечатка и копирование строго запрещены.

Оригинал страницы

Опубликовано: 10/01/2018

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *