Привязки внешнего вида

12 января 2018

На предыдущем уроке мы увидели, как привязки Knockout.js к потоку управления обеспечивают базовую систему шаблонов для кода просмотра. Связывание с потоком управления обеспечивает визуальную структуру вашего приложения, но полноценная система шаблонов требует больше, чем просто структуры. Связывание внешнего вида Knockout.js дает вам точный контроль над стилями и форматирование отдельных элементов.

На момент написания этой статьи Knockout.js поставляется с шестью связями для управления внешним видом элементов HTML:

text:-Установить содержимое элемента. html:-Установить содержимое HTML элемента. visible:-Посмотреть или скрыть элемент на основе определенных условий. css:-Добавить классы CSS к элементу. style:-Определить атрибут стиля элемента. attr:-Добавить произвольные атрибуты элементу.

Как и все привязки Knockout.js, привязки внешнего вида всегда встречаются внутри атрибута привязки данных элемента HTML. Но, в отличие от привязок контрольного потока предыдущего урока, привязки внешнего вида влияют только на их ассоциированный элемент - они не изменяют шаблонные блоки или не изменяют контекст привязки.


Текст Binding

Связывание текста - это хлеб и масло Knockout.js. Как мы уже видели, привязка текста отображает значение свойства внутри элемента HTML:

<td data-bind='text: name'></td>

Вы действительно должны использовать только текстовую привязку на элементах текстового уровня (например,,и т. Д.), Хотя технически это можно применить к любому элементу HTML. В качестве своего параметра текстовое связывание принимает любой тип данных, и он передает его в строку перед ее рендерингом. Текстовое связывание исключает HTML-объекты, поэтому его можно использовать для безопасного отображения содержимого, созданного пользователем.

Также стоит отметить, что Knockout.js управляет кросс-браузерными проблемами за кулисами. Для IE он использует свойство ierText, а для Firefox и связанных с ним браузеров он использует textContent.


Связывание html

Связывание html позволяет отображать строку как разметку HTML. Это может быть полезно, если вы хотите динамически генерировать разметку в ViewModel и отображать ее в своем шаблоне. Например, вы можете определить вычисляемое наблюдаемое имя formattedName в нашем объекте Product, которое содержит некоторый HTML:

function Product(name, price, tags, discount) {
  ...
  this.formattedName = ko.computed(function() {
    return "<strong>" + this.name() + "</strong>";
  }, this);
}

Затем вы можете отобразить форматированное имя с привязкой html:

<span data-bind='html: featuredProduct().formattedName'></span>

Хотя это и ставит целью отделить контент от презентации, привязка html может оказаться универсальным инструментом при разумном использовании.

Всякий раз, когда вы визуализируете динамический HTML - будь то с помощью привязки html или ASP.ET - всегда убедитесь, что разметка проверена. Если вам нужно отображать контент, которому нельзя доверять, вы должны использовать текстовую привязку вместо html.

В предыдущем фрагменте также обратите внимание, что featuredProduct является наблюдаемым, поэтому к базовому объекту необходимо ссылаться на пустой вызов функции вместо прямого доступа к свойству с помощью featuredProduct.formattedName. Опять же, это распространенная ошибка для новичков Knockout.js.


Видимое связывание

Как и привязки if и ifnot, видимое связывание позволяет вам отображать или скрывать элемент на основе определенных условий. Но вместо полного удаления элемента из DOM видимое связывание просто добавляет отображение: none объявление атрибуту стиля элемента. Например, мы можем изменить существующее, если привязка к видимой привязке:

<td data-bind='visible: discount() > 0' style='color: red'>

Полученный HTML-код как для if, так и для видимых версий показан в следующем примере кода. В этом примере предполагается, что условие оценивается как false:

<!-- Using if binding: -->
<td data-bind="if: discount() > 0" style="color: red"></td>
<!-- Using visible binding: -->
<td data-bind='visible: discount() > 0' style='color: red; display: none'>
  You saved <span data-bind='text: formattedDiscount'></span>!!!
</td>

Решение о том, когда использовать видимое и наоборот, в основном определяется контекстом. В этом случае на самом деле лучше использовать привязку if, так что пустойсоздает равное количество столбцов для каждой строки.

Эта привязка принимает тот же параметр, что и привязки if и ifnot. Условие может быть свойством вашего ViewModel, выражения JavaScript или функции, которая возвращает логическое значение.


css Binding

Связывание css позволяет вам определять классы CSS для элементов HTML на основе определенных условий. Вместо того, чтобы принимать условие как свой параметр, он принимает объект, содержащий имена классов CSS, как имена свойств и условия для применения класса как значения. Это лучше всего объяснить на примере.

Предположим, вы хотите обратить особое внимание на скидку продукта, когда она превышает 15%. Один из способов сделать это - добавить привязку css к сообщению «You save __%» внутри

, который отображает все элементы нашей корзины покупок:

<td data-bind='if: discount() > 0' style='color: red'>
  You saved <span data-bind='text: formattedDiscount,
             css: {supersaver: discount() > .15}'></span>!!!
</td>

Во-первых, вы заметите, что можно добавить несколько привязок к одному атрибуту привязки данных, разделив их запятыми. Во-вторых, привязка css принимает в качестве аргумента объект {supersaver: discount ()>.15}. Это похоже на сопоставление, которое определяет, когда класс CSS должен быть добавлен к элементу. В этом случае класс.supersaver будет добавляться всякий раз, когда скидка продукта превышает 15% и удаляется в противном случае. Фактический CSS, определяющий правило.supersaver, может быть определен где угодно на странице (т. Е. Внешней или внутренней таблицы стилей).

.supersaver {
  font-size: 1.2em;
  font-weight: bold;
}

Если вы добавите 10% скидку на второй продукт, вы должны увидеть нашу привязку css в действии:

Условие, содержащееся в свойстве объекта, совпадает с параметром if, ifnot и visible bindings. Это может быть свойство, выражение JavaScript или функция.


Стиль Binding

Связывание стилей обеспечивает те же функции, что и привязка css, за исключением того, что он манипулирует атрибутом стиля элемента вместо добавления или удаления классов. Поскольку в строковых стилях требуется пара ключ-значение, синтаксис параметра этого привязки также немного отличается:

You saved <span data-bind='text: formattedDiscount,
                     style: {fontWeight: discount() > .15 ? "bold" : "normal"}'></span>!!!

Если скидка продукта превышает 15%, Knockout.js отобразит этот элемент следующим образом:

<td style='color: red; font-weight: bold'>

Но если это меньше 15%, у него будет нормальный шрифт. Обратите внимание, что привязка стиля может использоваться в сочетании с атрибутом существующего стиля элемента.


Attr Binding

Связывание attr позволяет динамически определять атрибуты элемента HTML с помощью свойств ViewModel. Например, если наш класс Product имел свойство permalink, мы могли бы создать ссылку на отдельные страницы продукта, используя:

<p><a data-bind='attr: {href: featuredProduct().permalink}'>View details</a></p>

Это добавляет атрибут href к тегу, указывающему на все, что хранится в свойстве permalink. И, конечно, если постоянная ссылка является наблюдаемой, вы можете использовать все преимущества автоматического отслеживания зависимостей Knockout.js. Поскольку постоянные ссылки обычно хранятся с объектом данных в постоянном хранилище (например, в блоге), динамическое создание ссылок таким образом может быть очень удобным.

Но привязка attr может сделать больше, чем просто создавать ссылки. Он позволяет добавлять атрибут к элементу HTML. Это открывает все виды дверей для интеграции ваших шаблонов Knockout.js с другими библиотеками DOM.


Сводка

Этот урок представил привязки внешнего вида Knockout.js. Многие из этих привязок изменяют элемент HTML, когда определенное условие выполнено. Определение этих условий непосредственно в привязке - это интуитивно понятный способ разработки шаблонов, и он сохраняет ориентированный на просмотр код за пределами ViewModel.

Помните, что цель Knockout.js - дать вам возможность сосредоточиться на данных за вашим приложением, автоматически синхронизируя представление всякий раз, когда данные изменяются. После того, как вы определили свои привязки, вам больше не придется беспокоиться о них (если вы, конечно, не измените структуру ViewModel).

Привязки внешнего вида, представленные в этом уроке, предоставляют все инструменты, необходимые для отображения ваших данных, но они не позволяют нам добавлять какое-либо взаимодействие пользователя с нашими компонентами представления. На следующем уроке мы рассмотрим, как Knockout.js управляет полями формы.

Этот урок представляет собой главу из «Knockout Succinctly», бесплатную электронную книгу от команды Syncfusion.