10.01.2018

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

Назначение

Биндинг html заставляет связанный DOM элемент отображать HTML значение вашего параметра.

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

Пример

<div data-bind="html: details"></div>
 
<script type="text/javascript">
    var viewModel = {
        details: ko.observable() // Изначально пусто
    };
    viewModel.details("<em>Для более подробной информации, сотри отчет <a href='report.html'>здесь</a>.</em>"); // появляется HTML контент
</script>

Параметры

  • Основной параметр
    KO сотрет предыдущий контент и затем установит контент в соответствии с вашим параметром, используя функцию html из jQuery или, если jQuery не доступен, распарсит строку в HTML узлы и присоединит каждый узел, как дочерний к данному элементу.Если параметр является observable-значением, то биндинг обновит контент элемента при изменении значения. В ином случае, он единожды установит контент элемента и не будет обновлять его в будущем.

    Если вы укажете что-то отличающееся от числа или строки (скажем, вы передали объект или массив), то innerHTML будет эквивалентен вызову вашПараметр.toString()

  • Дополнительные параметры
    • Нет

Примечание: О кодировке HTML

Поскольку этот биндинг устанавливает контент элемента, используя innerHTML, вам следует быть осторожнее, и не использовать значения модели с не контролируемыми вами значениями, потому что это может служить возможностью атак от злоумышленников внедрением скриптов. Если нет возможности гарантировать безопасность отображаемого контента (например, если он основан на различных данных, введенных пользователем, которые хранились в базе данных), то можно использовать биндинг text, который вместо html задает текстовое значение содержимого элемента, используя innerText или textContent.

Зависимости

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


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

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

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

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

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

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