Биндинг «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
Перепечатка и копирование строго запрещены.