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

Назначение

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

Обычно, его полезно использовать с элементами вроде <span> или <em> которые традиционно используются для отображения текст, но технически, можно использовать этот биндинг с любым элементом.

Пример

Сегодняшнее сообщение: <span data-bind="text: myMessage"></span>
 
<script type="text/javascript">
    var viewModel = {
        myMessage: ko.observable() // Изначально пусто
    };
    viewModel.myMessage("Здорово, мир!"); // Показываем текст
</script>

Параметры

• Основной параметр
  Knockout задает контент элемента в виде текстового значения из переданного в биндинг параметра. Любой предыдущий контент будет перезаписан.Если в этом параметре observable-значение, то биндинг будет обновлять текст элемента при изменении значения. В ином случае, он установит текст элемента единожды и не будет обновлять его в будущем.Если вы передадите что-либо, отличающееся от числа или строки (например., вы передали объект или массив), то отображаемый текст будет эквивалентен вызову вашПараметр.toString()
• Дополнительные параметры
  • Нет

Примечание 1: Использования функций и выражений для определения текстового значения

Если вам нужно определить текст программным путем, то одним из вариантов будет создание computed переменной, и использовать её оценочную функцию для размещения вашего кода, определяющего, какой текст отображать.

Например,

Сегодня товар <span data-bind="text: priceRating"></span>.
 
<script type="text/javascript">
    var viewModel = {
        price: ko.observable(24.95)
     };
     viewModel.priceRating = ko.pureComputed(function() {
         return this.price() > 50 ? "дорогой" : "доступный";
     }, viewModel);
</script>

Теперь, при изменении свойства price, текст будет переключаться между “дорогой” и “доступный”, как это требуется.

В качестве альтернативы, можно не создавать computed-переменную, если у вас простая операция вроде данной. Вы можете передать произвольное JavaScript выражение в биндинг text. Например,

Сегодня товар <span data-bind="text: price() > 50 ? 'дорогой' : 'доступный'"></span>.

Данное выражение будет иметь совершенно такой же результат, без необходимости использовать computed-переменную priceRating.

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

Поскольку этот биндинг задает текст, используя text DOM-узла, то безопасно использовать любое строковое значение без риска внедрения HTML или скрипта. Например, если вы напишете:

viewModel.myMessage("<i>Здорово, мир!</i>");

… это не будет отображено, как текст с курсивом, но будет отображаться как обычный текстовый литерал с отображением угловых скобок.

Если вам нужно таким образом установить HTML-содержимое, смотри биндинг html.

Примечание 3: Использование “text” без элемента-контейнера

Иногда бывает нужно установить текст используя Knockout без использования дополнительного DOM-элемента с биндингом text. Например, не разрешается вкладывать другие элементы внутри тега option, так что следующее не сработает.

<select data-bind="foreach: items">
    <option>Элемент <span data-bind="text: name"></span></option>
</select>

Для реализации такого подхода, можно использовать способ привязки биндинга без контейнера, который основан на тегах комментариев.

<select data-bind="foreach: items">
    <option>Элемент <!--ko text: name--><!--/ko--></option>
</select>

Теги комментариев <!—ko—> и <!—/ko—> работают в качестве маркеров начала/конца, определяющие “виртуальный элемент”, содержащий внутри разметку. Knockout понимает такой синтаксис виртуального элемента и привязывает данные, как если бы у вас был реальный элемент-контейнер.

Примечание 4: О странностях IE 6 с пробелом

IE 6 имеет странность (quirk), где он иногда игнорирует пробел, идущий сразу после пустого span элемента. Это не имеет ничего общего с Knockout, но в случае, когда вы хотите написать:

Добро пожаловать, <span data-bind="text: userName"></span> на наш веб-сайт.

… и IE 6 не отобразит пробела до слова на наш веб-сайт, можно избежать этой проблемы, вставив любой текст между тегами <span>, например:

Добро пожаловать, <span data-bind="text: userName"> </span> на наш веб-сайт.

Другие браузеры, и более новые версии IE, не имеют этой странности.

Зависимости

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

---

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

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

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