Bazaprogram.ru

Новости из мира ПК
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Knockout css binding

Применение, советы и особенности knockout.js

О библиотеке knockout.js на хабре написано не так много, но кое что есть (и конечно же есть официальный туториал и другие материалы на оф. сайте и хороший ресурс на англ. языке knockmeout.net, статьи которого смогу перевести, если будет спрос). Данная статья возможно перерастёт в цикл статей по javascript и нокауту, если нло не похитит меня.

Изначально готовил материал для людей, уже знакомых с нокаутом и mvvm, но в комментариях к другим статьям меня попросили рассказать как готовить нокаут для чайников. Предполагаю, что вы уже прочитали предыдущие статьи о нокауте на хабре. Поехали!

Зачем нужен Knockout.js?

    Иметь возможность легко наполнять интерфейс данными из json-подобного объекта (модели):

Но такая привязка чаще всего не используется, ведь при изменении модели не изменяется DOM и наоборот.

  • Создавать двустороннюю наблюдаемую (observable) привязку интерфейса и модели, т.е. в реальном времени будет обновляться интерфейс при изменении модели, а модель при изменении в интерфейсе (рабочий пример при вводе текста в формах). Тут есть один нюанс, в input полях обновление модели произойдёт только при событии onblur (убрать фокус с элемента), данную ситуацию можно исправить, подписавшись на событие input , соответственно вручную обновлять модель. Пример на jsfiddle. Пользователь m_z предложил более удобный вариант обновления модели с использованием valueUpdate: ‘input’ (Пример).
  • Дополнительно подписываться на изменения модели. Код из документации:

    Отписываемся от изменений:

    Что такое атрибут data-bind и bindings?

    Этот атрибут сильно похож на json-объект, он позволяет нам привязать данные и обработчики событий к текущему DOM-узлу. Knockout.js парсит этот атрибут и выполняет JavaScript выражения (подробно описано в доках). Эта конструкция запускается в контексте переданной модели данных. Соответственно и синтаксис атрибута должен быть корректным с точки зрения javascript-кода.

    Knockout.js предлагает набор стандартных привязок (bindings), которые позволяют редактировать стили, контент, обработчики и прочее, создавая магические вещи. Кроме того, можно писать свои привязки, про это отлично рассказано опять же в доках.

    На этом закончим описание того, зачем же нужен нокаут, всё остальное вы сами знаете на каком сайте найти и перейдём к некоторым не очевидным новичку вещам.

    Работа с observableArray

    Допустим, вам надо динамически изменять массив, на который подписаны какие-то обработчики (или интерфейс). Например, вы получили новую партию данных с сервера и в цикле добавляете их в массив.
    Если сделать все в лоб — то обработчик изменения отработает столько раз, сколько элементов вы добавите. И это скажется на производительности. Пример взят из knockmeout.net

    Так делать не надо:

    Гораздо лучше так:

    Полный пример на jsfiddle.

    В комментариях на stackoverflow даже рекомендуют такую функцию:

    Шаблоны

    Knockout.js нужен в проекте прежде всего для наполнения интерфейса данными. Самый распространенный сценарий для этого — получение AJAX-запросом JSON-данных с сервера и рендеринг, т.е. обновление контента без перезагрузки страницы.
    Для этого нам нужны фрагменты страницы, которые мы сможем подменять в интерфейсе и наполнять данными — т.е. нам нужны шаблоны для различных данных. Knockout.js умеет работать с различными видами шаблонов (jQuery.tmpl, underscore, нативный) — остановимся на последнем (хотя нам даже позволительно написать свой).

    Не нативные шаблонизаторы не поддерживают использование некоторых привязок внутри него (в частности, очень приятный with, который сменяет контекст модели для шаблона).

    Читать еще:  Как объединить ячейки в css

    Поэтому в некоторых случаях хочется использовать нативный шаблонизатор от knockout. Для этого в опциях надо передать templateEngine: ko.nativeTemplateEngine.instance . Что интересно (и не сказано в документации) — этот параметр можно передавать и в привязке template.

    Для программного рендеринга шаблонов используется команда:

    Эту команду удобно вызывать, например, в методе _create() при создании jquery-виджетов, которые используют шаблоны, и делается это так:

    Так же для вызова шаблона из другого шаблона используется стандартная привязка template:

    templateName — имя шаблона, на практике это id блока, в котором находится верстка с шаблоном:

    При этом движок шаблона не “наследуется” при вызове вложенных шаблонов — если мы вызываем шаблон из шаблона, обрабатываемого нативным шаблонизатором, то внутренний шаблон (если не указать шаблонизатор принудительно) все равно использует дефолтный шаблонизатор (например, jQuery.tmpl, если такой был подключен в проекте).
    По этому, если в проекте используются другие шаблонизаторы, а вы хотите использовать нативный, движок надо указывать каждый раз. Но эта особенность позволяет нам одновременно использовать разные шаблонизаторы для вложенных шаблонов.

    Шаблоны без корневого элемента

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

    Хотя в документации он и не описан.

    Отладка в шаблонах

    Самая частая операция при программировании — отладка (хотя некоторые могут поспорить). Способ ниже позволит вам выводить сообщения в консоль используя оператор запятая и оператор группировки (подробнее про эти операторы).

    Смена контекста при помощи with и foreach — подводный камень

    Предположим, что у нас есть массив, в котором хранятся строки, которые мы хотим отслеживать.
    Выглядит инициализация массива примерно так:

    И мы хотим вывести форму, состоящую из input для её редактирования как-то вот так:

    В такой записи текстовые поля не будут работать в две стороны — изменения текста в поле не будет влиять на элементы массива, но изменение элементов массива будет влиять на содержимое текстовых полей. Пример на jsfiddle.

    Причина в том, что шаблон выше по сути своей эквивалентен следующему:

    with: $data — здесь происходит “распаковка” $data: unwrapObservable( $data ) для того, чтобы обращения вида $data.somefield внутри шаблона работали. Но эта распаковка подставляет вместо $data внутри — её значение. Как эту проблему обойти — навскидку не придумал. Но пользователь lega предложил использовать вариант с созданием объекта-обёртки (пример), если у вас будет несколько полей, то такой метод оправдан и будет работать.

    Работа с текстовыми редакторами

    Получать значение из input используя одноимённое событие в реальном времени мы уже научились, а как быть с редакторами где контент — это html элементы? Воспользуемся MutationObserver и т.к. этот api работает не везде, подстрахуемся другими DOM событиями и напишем не совсем кроссбраузерный (современные браузеры работают нормально) код, который можно встроить в любимый редактор:

    Именно эту функцию я использую для обновления модели в одном проекте, который использует неплохой редактор от imperavi, если кому понадобится этот код в виде плагина, смогу написать и выложить на гитхаб.

    Читать еще:  Css font times new roman

    Заключение

    Статья получилась нормальных размеров, а материал еще остался — работа с деревьями, написание собственных привязок, jQuery виджетов с нокаутом и некоторые другие хитрости и примеры. Голосуйте зарядом, комментируйте, указывайте на ошибки.

    По ошибкам в орфографии и пунктуации прошу в личку.

    Knockstrap

    Knockout bindings library

    Overview

    Knockstrap is binding library for Knockout.js, which provides binding to Twitter Bootstrap widgets

    Features

    • Using Bootstrap widgets via data-bind attribute
    • Supports dynamicaly changing parameters and data of widgets via observables
    • Supports Knockout templates for such widgets, as modal or popover
    • Supports using of third party template engines
    • Provides default templates for such widgets, as modal , for typical using
    • Provides string template engine, which allows to use javascript strings as templates

    Using

    If you have all dependencies, you only need to include knockstrap.min.js or knockstrap.js to your pages:

    Dependencies

    Tooltip

    Binding to Bootstrap tooltip

    Examples

    Html markup

    View model

    Options

    tooltipOptions

    Type: object, can be observable

    Uses Bootstrap 3 options. If any option is not specified, uses default value. See Bootstrap documentation. All of the options can be observables. Also option’s object can be observable too.

    Popover

    Binding to Bootstrap popover. Supports custom templates with observables for popover content

    Examples

    Html markup

    View model

    Options

    All of the options can be observables, also option’s object can be observable too

    options

    Type: object, can be observable

    Bootstrap options for popover. If any option is not specified, uses default value. Please, see Bootstrap documentation

    templateName

    Type: string, can be observable

    Name of template for popover content. If template is not specified, uses content property from options object

    templateData

    Type: object, can be observable

    Data for template

    templateOptions

    Contains options for template.

    They are: templateEngine , afterRender , beforeRender and afterAdd . Please, see Knockout documentation for details.

    Short notation

    If you don’t need use template, you can use short notation of binding, which uses only option object.

    popoverOptions

    Type: object, can be observable

    Bootstrap options for popover. If any option is not specified, uses default value. Please, see Bootstrap documentation

    Alert

    Binding to Bootstrap alert widget. This binding can be used with virtual elements. Supports custom templates with observables

    Examples

    Html markup

    View model

    Options

    All of the options can be observables.

    message

    Type: string, can be observable

    Text of alert message. Doesn’t used if data property is specified.

    type

    Type: string, can be observable (default: ‘info’ )

    Type of alert message. Possible values are ‘info’ , ‘warning’ , ‘danger’ , ‘success’ . To specify your own type you should define css-styles for this type. For exmaple, for type ‘my-custom-type’ , you shoud provide css class ‘alert-my-custom-type’ .

    template

    Type: string, can be observable (default: ‘alertTemplate’ )

    Name of template for alert content. Default template:

    data

    Type: object, can be observable

    Data for template. If this option is specified, message option will be ignored.

    For default template, you should provide message property (or, if it will not provided via data , message option of binding will be used).

    Читать еще:  Задания по css

    templateOptions

    Contains options for template.

    They are: templateEngine , afterRender , beforeRender and afterAdd . Please, see Knockout documentation for details.

    Modal

    Binding to Bootstrap modal widget.

    Examples

    Html markup

    View model

    Options

    All of the options can be observables.

    options

    Type: object, can be observable

    Bootstrap options for modal. If any option is not specified, it uses default values (except show , it default value is false in comparing with Bootstrap). Also, can be specified via data-attributes. Please, see Bootstrap documentation for details.

    visible

    Type: boolean, can be observable (default: false )

    Shows modal, if true, otherwise hides modal. By default is false.

    Can be omitted in order to use Bootstrap’s attributes for showing or closing modal.

    dialogCss

    Type: string, can be observable (default: undefined )

    Used to add classes to modal-dialog element. For example, it can accept modal-lg value for large modal or modal-sm for small.

    Please, see Bootstrap documentation for more details.

    header

    Type: object, can be observable

    Template binding for modal header, uses options from Knockout template binding. Please, see Knockout documentation for details.

    Default values of header object:

    name

    Type: string, can be observable (default: ‘modalHeader’ )

    Name of template for modal header. Default template:

    data

    Data for header template. For default template, you should provide label property

    body

    Type: object, can be observable

    Template binding for modal body, uses options from Knockout template binding. Please, see Knockout documentation for details.

    Default values of body object:

    name

    Type: string, can be observable (default: ‘modalBody’ )

    Name of template for modal body. Default template:

    data

    Data for body template. For default template, you should provide content property, which can contain html.

    footer

    Type: object, can be observable

    Template binding for modal footer, uses options from Knockout template binding. Please, see Knockout documentation for details.

    If omitted, no footer will be rendered.

    Default values of footer object:

    name

    Type: string, can be observable (default: ‘modalFooter’ )

    Name of template for modal footer. Default template:

    data

    Data for footer template. For default template, data object contains:

    action

    Function, which will be called, when user clicks on primary button. If this property is omitted for default template, primary button wouldn’t render.

    primaryLabel

    Type: string, can be observable (default: ‘Ok’ )

    Text for primary button in default template.

    closeLabel

    Type: string, can be observable (default: ‘Close’ )

    Text for closing button in default template.

    events

    Type: object, can be observable

    Names of Bootstrap events, which are used by binding. Some bootstrap plugins change them, so you can pass new events to binding.

    Default values of events object:

    shown

    Type: string, can be observable (default: ‘shown.bs.modal’ )

    Name of Bootstrap event, which fired when the modal has been made visible to the user

    hidden

    Type: string, can be observable (default: ‘hidden.bs.modal’ )

    Name of Bootstrap event, which fired when the modal has finished being hidden from the user

  • Ссылка на основную публикацию
    Adblock
    detector