что такое binding или двустороннее связывание
Что такое двухстороннее связывание?
Я много читал, что Backbone не выполняет двустороннюю привязку, но я не совсем понимаю эту концепцию.
Может ли кто-нибудь дать мне пример того, как двухстороннее связывание работает в базе кода MVC и как это не работает с Backbone?
5 ответов
Двухстороннее связывание означает, что:
В Backbone вы можете легко достичь # 1, привязав метод представления «render» к событию «change» его модели. Чтобы достичь # 2, вам также нужно добавить прослушиватель изменений в элемент input и вызвать model.set в обработчике.
Вот скрипка с двусторонней привязкой, настроенной в Backbone.
Стоит упомянуть, что есть много разных решений, которые предлагают двухстороннее связывание и играют действительно хорошо.
На github есть более расширенный список расширений / плагинов для магистралей.
У МакГарнагла отличный ответ, и вы захотите принять его, но я подумал, что упомяну (так как вы спросили), как работает привязка данных.
Обычно это реализуется путем запуска событий всякий раз, когда в данные вносятся изменения, которые затем приводят к обновлению прослушивателей (например, пользовательского интерфейса).
Двухстороннее связывание работает, делая это дважды, с некоторой осторожностью, чтобы гарантировать, что вы не застрянете в цикле событий (когда обновление события вызывает другое событие, которое будет запущено).
Двухстороннее связывание означает, что любые связанные с данными изменения, влияющие на модель, немедленно распространяются в соответствующие представления и что любые изменения, вносимые в представления (ии) (скажем, пользователем) немедленно отражаются в базовой модели. Когда изменяются данные приложения, меняется и пользовательский интерфейс, и наоборот.
Хорошая реализация двустороннего связывания, очевидно, должна сделать эту связь между моделью и некоторыми представлениями как можно более простой, с точки зрения разработчика.
Это довольно типичный шаблон в необработанном приложении Backbone. Как видите, для этого требуется приличное количество (довольно стандартного) кода.
AngularJS и некоторые другие альтернативы (Ember, Knockout…) обеспечивают двустороннюю привязку в качестве функции от первого лица. Они абстрагируют многие крайние случаи в рамках некоторых DSL и делают все возможное для интеграции двухстороннего связывания в свою экосистему. Наш пример будет выглядеть примерно так с AngularJS (непроверенный код, см. Выше):
Но учтите, что некоторые полноценные расширения для двусторонней привязки действительно существуют и для Backbone (в необработанном, субъективном порядке уменьшения сложности): Эпоксидная смола, Stickit, ModelBinder…
Например, в Epoxy есть одна интересная особенность: она позволяет вам объявлять ваши привязки (атрибуты модели элемента DOM представления) либо внутри шаблона (DOM), либо внутри реализации представления (JavaScript). Некоторым людям очень не нравится добавлять «директивы» в DOM / шаблон (например, атрибуты ng- *, требуемые AngularJS, или атрибуты привязки данных Ember).
Взяв в качестве примера Epoxy, можно преобразовать необработанное приложение Backbone во что-то вроде этого (…):
На самом деле emberjs поддерживает двустороннюю привязку, которая является одной из самых мощных функций для инфраструктуры JavaScript MVC. Вы можете проверить это, упомянув binding в руководстве пользователя.
Для emberjs создать двухстороннюю привязку можно, создав новое свойство со строкой Binding в конце, а затем указав путь из глобальной области видимости:
Обратите внимание, что привязки не обновляются сразу. Ember ждет, пока весь код вашего приложения завершит работу, прежде чем синхронизировать изменения, поэтому вы можете изменять связанное свойство столько раз, сколько захотите, не беспокоясь о накладных расходах синхронизации привязок, когда значения временные.
Надеюсь, это поможет в расширении оригинального ответа.
Привязка данных в Angular (binding)
Итак, в предыдущих разделах мы подготовили проект к практической работе. В данном разделе мы рассмотрим, что такое привязка данных («байндинг», от англ. binding — связывание) в Angular и как ее делать.
Привязки используются для передачи каких-либо данных из компонента в шаблон и обратно. Есть несколько типов привязок в Angular:
Строчная интерполяция
Протестируем первый вид привязки. Изменим код шаблона, а именно его заголовок:
Затем изменим файл компонента и добавим переменную title
Теперь при изменении значения переменной title в компоненте, изменения также мгновенно будут отображаться в шаблоне. Попробуйте задать разные значения для переменной title и проверьте результат.
Также в такой привязке можно передавать не только переменную, а и, скажем, функцию, которая будет возвращать какое-то значение, или просто выполнять арифметические операции.
Привязка свойств и событий
Теперь сделаем второй и третий тип привязки. Добавим в разметку следующий элемент:
Для большей наглядности привязки перенесены на новую строку.
В файле компонента сделаем следующие изменения:
Теперь рассмотрим, что мы изменили.
Следующий input с типом text и кнопка также зависят от значения флага isChecked — если чекбокс отмечен (т.е. isChecked = true), тогда срабатывает привязка к атрибуту disabled и эти элементы отключаются. Как только вы снимите чекбокс, они станут доступны. Также к текстовому полю, к атрибуту есть привязка переменной с заголовком [value]=’title’
Еще одна привязка в этом примере сделана к кнопке — при клике на кнопку срабатывает метод changeTitle() и наш заголовок меняется на ‘Новый тайтл’.
Таким же способом можно сделать и привязку к атрибуту [class] или [style] любого тега
Двусторонняя привязка
А теперь давайте сделаем двухстороннюю привязку и будем менять заголовок на то значение, которое будем вводить в поле input.
Давайте для начала подготовим наш проект. В файле шаблона компонента нужно заменить эти строки, вместо [value] вставляем директиву [(ngModel)]
Далее в файле app.module.ts нам обязательно нужно подключить FormsModule
Привязка
Введение в привязку данных
В WPF привязка (binding) является мощным инструментом программирования, без которого не обходится ни одно серьезное приложение.
Привязка подразумевает взаимодействие двух объектов: источника и приемника. Объект-приемник создает привязку к определенному свойству объекта-источника. В случае модификации объекта-источника, объект-приемник также будет модифицирован. Например, простейшая форма с использованием привязки:
Для определения привязки используется выражение типа:
Работа с привязкой в C#
В данном случае получаем привязку для свойства зависимостей TextProperty элемента myTextBlock.
Также можно полностью установить привязку в коде C#:
Если в дальнейшем нам станет не нужна привязка, то мы можем воспользоваться классом BindingOperations и его методами ClearBinding() (удаляет одну привязку) и ClearAllBindings() (удаляет все привязки для данного элемента)
Некоторые свойства класса Binding :
ElementName : имя элемента, к которому создается привязка
IsAsync : если установлено в True, то использует асинхронный режим получения данных из объекта. По умолчанию равно False
Mode : режим привязки
Path : ссылка на свойство объекта, к которому идет привязка
TargetNullValue : устанавливает значение по умолчанию, если привязанное свойство источника привязки имеет значение null
RelativeSource : создает привязку относительно текущего объекта
Source : указывает на объект-источник, если он не является элементом управления.
XPath : используется вместо свойства path для указания пути к xml-данным
Режимы привязки
Свойство Mode объекта Binding, которое представляет режим привязки, может принимать следующие значения:
OneWay : свойство объекта-приемника изменяется после модификации свойства объекта-источника.
OneTime : свойство объекта-приемника устанавливается по свойству объекта-источника только один раз. В дальнейшем изменения в источнике никак не влияют на объект-приемник.
OneWayToSource : объект-приемник, в котором объявлена привязка, меняет объект-источник.
Применение режима привязки:
Обновление привязки. UpdateSourceTrigger
Односторонняя привязка от источника к приемнику практически мгновенно изменяет свойство приемника. Но если мы используем двустороннюю привязку в случае с текстовыми полями (как в примере выше), то при изменении приемника свойство источника не изменяется мгновенно. Так, в примере выше, чтобы текстовое поле-источник изменилось, нам надо перевести фокус с текстового поля-приемника. И в данном случае в дело вступает свойство UpdateSourceTrigger класса Binding, которое задает, как будет присходить обновление. Это свойство в качестве принимает одно из значений перечисления UpdateSourceTrigger :
PropertyChanged : источник привязки обновляется сразу после обновления свойства в приемнике
LostFocus : источник привязки обновляется только после потери фокуса приемником
Explicit : источник не обновляется до тех пор, пока не будет вызван метод BindingExpression.UpdateSource()
Свойство Source
Свойство Source позволяет установить привязку даже к тем объектам, которые не являются элементами управления WPF. Например, определим класс Phone:
Теперь создадим объект этого класса и определим к нему привязку:
Свойство TargetNullValue
На случай, если свойство в источнике привязки вдруг имеет значение null, то есть оно не установлено, мы можем задать некоторое значение по умолчанию. Например:
В данном случае у ресурса nexusPhone не установлено свойство Title, поэтому текстовый блок будет выводить значение по умолчанию, указанное в параметре TargetNullValue.
Свойство RelativeSource
Свойство RelativeSource позволяет установить привязку относительно элемента-источника, который связан какими-нибудь отношениями с элементом-приемником. Например, элемент-источник может быть одним из внешних контейнеров для элемента-приемника. Либо источником и приемником может быть один и тот же элемент.
Self : привязка осуществляется к свойству этого же элемента. То есть элемент-источник привязки в то же время является и приемником привязки.
FindAncestor : привязка осуществляется к свойству элемента-контейнера.
Например, совместим источник и приемник привязке в самом элементе:
Здесь текст и фоновый цвет текстового поля связаны двусторонней привязкой. В итоге мы можем увидеть в поле числовое значение цвета, поменять его, и вместе с ним изменится и фон поля.
Привязка к свойствам контейнера:
При использовании режима FindAncestor, то есть привязке к контейнеру, необходимо еще указывать параметр AncestorType и передавать ему тип контейнера в виде выражения AncestorType=
Свойство DataContext
Таким образом мы задаем свойству DataContext некоторый динамический или статический ресурс. Затем осуществляем привязку к этому ресурсу.
Русские Блоги
С помощью Windows Presentation Foundation (WPF) можно легко разработать мощный пользовательский интерфейс, а WPF предоставляет возможности привязки данных. Привязка данных WPF аналогична функциям привязки данных в Winform и ASP.NET, но также отличается.В WPF привязка данных выполняется посредством привязки обратного кода, привязки внешнего XAML или их комбинации. набор. Вы можете связывать элементы управления, общедоступные свойства, XML или объекты. Привязка данных в WPF выполняется быстрее, гибче и проще, чем WinForm и ASP.NET.
Что такое привязка данных
Для привязки данных в WPF должны быть цель привязки и источник данных для привязки. Целью привязки может быть любое доступное свойство или элемент управления, который наследуется от DependencyProperty, например свойство Text элемента управления TextBox. Источниками данных могут быть свойства других элементов управления, таких как экземпляры объектов, элементы XAML, набор данных ADO.NET, данные XML. Для привязки XML и привязки объектов Microsoft предоставляет два вспомогательных класса XmlDataProvider и ObjectDataProvider.
В чем разница между привязкой данных WPF и привязкой данных ASP.NET и WinForm? Самое большое отличие состоит в том, что WPF использует оператор
| Имя участника | объяснение |
|---|---|
| Default | Используйте значение режима по умолчанию для цели привязки. Значения по умолчанию различны для каждого свойства зависимости. Как правило, редактируемые пользователем свойства элемента управления (такие как свойства текстовых полей и флажков) по умолчанию имеют двустороннюю привязку, в то время как большинство других свойств по умолчанию используют одностороннюю привязку. Программный метод для определения того, является ли привязка свойства зависимости односторонней или двусторонней по умолчанию, заключается в использовании GetMetadata для получения метаданных свойства свойства, а затем проверяет логическое значение свойства BindsTwoWayByDefault. |
| OneTime | Когда приложение запускается или контекст данных изменяется, цель привязки обновляется. Этот тип привязки подходит для ситуаций, когда уместны снимки, использующие текущее состояние, или данные, состояние данных которых фактически является статическим. Вы также можете использовать этот тип привязки, если хотите инициализировать целевое свойство значением из исходного свойства и заранее не знаете контекст данных. Этот тип привязки по сути является упрощенной формой привязки OneWay и может обеспечить лучшую производительность без изменения исходного значения |
| OneWay | Когда источник привязки (источник) изменяется, атрибуты цели привязки (цели) обновляются. Этот тип привязки применим, когда связанный элемент управления неявно доступен только для чтения. Например, вы можете привязать к источнику, такому как биржевой тикер. Или целевое свойство может не иметь интерфейса управления для внесения изменений, такого как цвет фона таблицы, связанный с данными. Если нет необходимости отслеживать изменения целевых свойств, используйте режим привязки OneWay, чтобы избежать накладных расходов в режиме привязки TwoWay. |
| OneWayToSource | Обновить исходные атрибуты при изменении целевых атрибутов |
| TwoWay | Вызывает изменения в исходных или целевых атрибутах для автоматического обновления друг друга. Этот тип привязки подходит для редактируемых форм или других полностью интерактивных сценариев пользовательского интерфейса. |
(3) Триггеры могут быть сконфигурированы для определения, когда пользователь вводит данные в интерфейс для изменения значений в источнике данных. Это может быть достигнуто через свойство UpdateSourceTrigger, которое имеет следующие значения:
| Имя участника | объяснение |
|---|---|
| Default | r Значение по умолчанию UpdateSourceTrigger для привязанного целевого свойства. Значением по умолчанию для большинства свойств зависимостей является PropertyChanged, а значением по умолчанию для свойства Text является LostFocus. Программный способ определения значения UpdateSourceTrigger по умолчанию для свойства зависимости состоит в том, чтобы использовать GetMetadata для получения метаданных свойства для свойства, а затем проверить значение свойства DefaultUpdateSourceTrigger. |
| Explicit | Обновлять источник привязки только при вызове метода UpdateSource |
| LostFocus | Обновите источник привязки, когда целевой элемент привязки теряет фокус |
| PropertyChanged | Немедленно обновите источник привязки при изменении свойства цели привязки |
Конкретное использование выглядит следующим образом:
Во-вторых, простая привязка
Далее следует первый пример этой статьи, очень простой пример привязки, который демонстрирует, как отобразить выбранное значение в ListBox в TextBlock с помощью привязки.
Сначала добавьте семь ListBoxItems в ListBox в качестве параметров для ListBox.
Во-вторых, свяжите текст второго TextBlock с выбором ListBox через Binding. Свойство ElementName в синтаксисе Binding указывает имя элемента управления, к которому привязано свойство Text TextBlock. Свойство Path указывает свойство элемента ListBox, которое мы свяжем со свойством Text. Конкретный код выглядит следующим образом.
Привязка данных¶
Angular поддерживает механизм привязки, благодаря которому различные части шаблона могут быть привязаны к некоторым значениям, определенным в компоненте.
В Angular есть четыре формы привязки данных:
2. Привязка свойства элемента html к значению компонента (односторонняя). Например:
3. Привязка метода компонента к событию в DOM (генерация события в DOM вызывает метод на компоненте) (односторонняя). Например:
4. Двусторонняя привязка, когда элемент DOM привязан к значению на компоненте, при этом изменения на одном конце привязки сразу приводят к изменениям на другом конце. Например:
Первый вид привязки заключается в использовании фигурных скобок, в которые передается значение из компонента. Например, пусть у нас будет определен следующий компонент:
И при запуске приложения выражения типа <
И если в процессе работы приложения свойства name и age в компоненте изменят свое значение, то также изменится значение в разметке html, которая привязана к этим свойствам.
Привязка свойств элементов html¶
Мы можем привязать значение к свойству элемента html. В этом случае свойство указывается в квадратных скобках:
Хотя в данном случае мы могли бы написать и так:
Но важно понимать, что здесь идет привязка не к атрибуту, а именно к свойству элемента в javascript, который представляет данный элемент html. Например, мы могли бы привязать некоторое значение к текстовому содержимому элемента:
Привязка к событию¶
Привязка к событию позволяет связать с событием элемента метод из компонента:
В качестве альтернативы мы могли бы установить привязку к событию так:
После префикса on через дефис идет название события.
$event — это встроенный объект, через который Angular передает информацию о событии.
Двусторонняя привязка¶
Двусторонняя привязка позволяет динамически менять значения на одном конце привязки при изменениях на другом конце. Как правило, двусторонняя привязка применяется при работе с элементами ввода, например, элементами типа input. Например:
В итоге изменения в текстовом поле будут сказываться на тексте во втором текстовом поле и параграфе: