В предыдущей серии обучения NockoutJS (i) первая статья KO опыта, было упомянуто, что метод привязки Data-bind = "xx: OO" в KO может не только связывать текст, значение и т. Д., Но также связывать видимый, стиль и другие атрибуты внешнего вида, клик, текстовый и другие события и даже управление потоком программ. Различные причудливые пакеты определенно удовлетворят вашу фантазию.
В следующем кратко рассказывается об использовании различных привязков, которые в основном разделены на три типа: представление, процесс и взаимодействие в соответствии со связанными свойствами.
Атрибуты производительности
Привязывающие атрибуты класса презентации включают в себя видимый, текст, HTML, CSS, стиль и атри. За исключением класса, который CSS представляет CSS, все остальное легко понять. Конечно, именование в стиле должно соответствовать JS, и его следует удалить - изменить на именование верблюдов, как показано ниже:
<!-html-код-> <div Data-bind = "visible: supsShowmessage"> вы увидите это сообщение только тогда, когда «spanShowMessage» содержит истинное значение. PROFITWARNING: CurrentProfit () <0} "> CSS Class Test </div> <div Data-bind =" style: {color: currentprofit () <0? {supphowmessage: ko.observable (true), // Сообщение изначально VisiblemyMessage: ko.observable (), // изначально Blankdetails: Ko.observable (), // изначально Blankcurrentprofit: KO.ObServable (150000), // Положительно, что мы не применяем refornporporpofforpoffOFOFOR. ko.observable (150000), // положительное значение, поэтому изначально Blackurl: ko.observable ("end-end.html"), urltitle: ko.observable («Отчет, включая статистику окончательного года,)}; ko.applybindings (viewmodel); // Применить привязкиЭффект такой:
Как упоминалось в предыдущей статье, в дополнение к отдельным атрибутам XXOO, вы также можете передавать объекты JSON, то есть вы можете объединить атрибуты связывания, такие как:
<!-html-код-> <div Data-bind = "{visible: supsShowmessage, text: mymessage, css: {refortwarning: currentProfit () <0}}"> вы увидите это сообщение только тогда, когда "должен" shupShowmessage ".Конечно, эффект такой:
Настройка класса презентации относительно проста. Следует отметить, что многие классы презентаций не нужно динамически изменять. В настоящее время вы можете использовать настройки ViewModel для достижения централизованной инициализации данных, но не устанавливайте их на наблюдаемые, такие как:
// JS Codevar ViewModel = {supsShowMessage: ko.observable (true), // Сообщение изначально visiblemyMessage: «Этот текст не требует динамического обновления '// изначально пусто};Процесс класса атрибуты
Классы процессов включают в себя Foreach, если, ifnot, с и более продвинутыми привязками «компонентов». Если и не так похожи на видимый. Разница состоит в том, что если прямо удалит соответствующие компоненты из DOM, в то время как виден только контролирует скрытый дисплей, а компоненты все еще находятся в DOM. с тем же эффектом, что и в JS, который должен расширить цепочку применения. Проще говоря, это добавить «префикс». перед переменной. Здесь я буду вводить только Foreach, а компонент расположен вместе с привязкой шаблона.
Проверьте код:
<!-HTML-код-> <p> Test Foreach Привязка </p> <ul data-bind = "foreach: people"> <li> № <span data-bind = "text: $ index"> </span> name: <span data-bind = "text: name"> </span> <a href = "#" data-bind = "$ main.Removepople" href = "#" data-bind = "Нажмите: удалить"> Удалить </a> </li> </ul> <input type = "кнопка" data-bind = "click: addpeople" value = "add"/> var listmodel = function () {// Установите значение массива людей (люди на самом деле являются массивом функций). Используйте Foreach, чтобы пересечь объект массива // ul, Li соответствует детям людей и людей. Следовательно, при привязке внутри LI, область применения в ребенке людей {name ...}. Чтобы вызовать удаленных людей вне людей, требуется родитель $ // Если он называется удалить внутренне, это в удалении {name ...}, соответствующий текущему элементу LI, а область является текущим доменом, не требуется родитель $. this.people = ko.observablearray ([{name: "mark Zake", remove: function () {that.people.remove (this); // Обратите внимание на текущий объект (это {name ...}) и область применения. Не беспокойтесь о тегах HTML, чистое JS -понимание - это просто}}, {name: {that.people.remove (this);}}, {name: "green deny", remove: function () {this.people.remove (this);}}]); // adpeople называет метод одного и того же уровня людей внутренне. Это изменится, и это должно быть сохранено заранее и передано. Var what = this; this.addpeople = function () {that.people.push ({name: new date (). Todatestring (), remove: function () {that.people.remove (this);}});}; // объект lelement stopme a tag, что является тегом. То, что вы хотите выполнить, это listmodel.people.remove (a.parent) this.removepeople = function () {that.people.remove (this);}}; ko.applybindings (new listmodel ());Здесь легче связываться с иерархическим соответствием между узлом DOM и ViewModel. Во -первых, применить обязательство на фон на UL, то есть каждый LI соответствует каждому ребенку. После того, как это соответствует этому, вы можете понять это в соответствии с правилами действия JS. Говоря о масштабах, я должен упомянуть об этом. Как говорится, я относится к этому так, как будто я был моей первой любовью, и это обмануло меня тысячи раз. Здесь Xiaojia добавила функцию удаления в официальную версию, которая просто соответствовать официальным ударам. Что касается переменных, таких как $ index и $ parent, просто понимайте их буквально.
Атрибуты класса взаимодействия
Наконец, пришло время понять. Самая важная причина использования КО - справиться с проблемой динамической интерактивной презентации пользовательского интерфейса. Здесь мы представим некоторые привязки, связанные с формами.
(1) Нажмите на привязку
Синтаксис: Data-Bind = "Click: ClickHandler". Функция ClickHandler здесь может быть любой функцией, не обязательно функцией в ViewModel, если на нее можно ссылаться. Есть несколько вещей о событии Click:
1. ПАРАМЕТРИТЕЛЬНЫЙ ПРОВОДКИ, КО по умолчанию передает текущий компонент в качестве первого параметра функции ClickHandler. Обратите внимание на текущий обязательный контекст здесь. Например, в среде с возвращенным компонентом станет компонентом вместо текущего компонента, который вы хотите. Если вам также нужно передать параметр события, передайте событие в качестве второго параметра. Если вам нужно пройти больше параметров, вам нужно обернуть его функцией. нравиться:
<кнопка данных bind = "click: function (data, event) {myfunction ('param1', 'param2', data, event)}"> нажмите меня </button>2. Настройки поведения по умолчанию (например, ссылки)
KO запрещено поведением событий по умолчанию, и мы обычно связываем события щелчка для ссылок и не позволяем им прыгать. Однако, если вам нужно включить это, просто верните True в ClickHandler.
3. пузырь
KO разрешено пузыриться по умолчанию. Вы можете установить событие Click, чтобы не пузыриться по данным-bind = "Нажмите: ClickHandler, ClickBubble: false".
(2) Привязка события
KO предоставляет этот интерфейс для пользователей для настройки событий привязки. Относительно передачи параметров, поведения по умолчанию, пузырьков и т. Д., То же самое, что и привлечение клика, вариант использования:
<div> <div data-bind = "event: {mouseover: enabledetails, mouseout: disablettails}"> мышь на мне </div> <div data-bind = "visible: defitabled"> div> </div> <script type = "text/javascript"> var viewmodel = {diveabled: {this.detailsenabled (true);}, disabletetails: function () {this.detailsenabled (false);}}; ko.applybindings (viewmodel); </script>(3) Отправить обязательство
В основном он используется для выполнения какой -то работы проверки. KO заблокирует действие формы подачи по умолчанию и передат в соответствие с границей отправки. Когда вам нужно отправить в будущем, верните True в обязательном событии.
PS: Почему бы не использовать события клика в форме, чтобы справиться с этим? Поскольку отправка изначально предназначена для обработки событий отправки, она также может принять действия подачи заявки, такие как возврат перевозки, но щелчок не может.
(4) Значение связано с TextInput
Значение привязки и текстовое средство в поле ввода выглядят одинаково, но более рекомендуется использовать событие TextInput для привязки, потому что TextInput является новым, специально используемым для обработки событий ввода. Как вы можете видеть в предыдущей статье, при использовании ввода привязки значения (слева) фокус должен быть перемещен из окна ввода, прежде чем он будет обновлен, в то время как TextInput (справа) обновляется немедленно.
Хотя привязка значений также может достичь того же эффекта, что и TextInput, установив Data-Bind = "{value: Price, valueUpdate:« AfterKeyDown '} », это не так совместимо с TextInput в браузере.
(5) Привязка параметров (SelectedOptions)
В раскрывающемся списке параметры могут использоваться для привязки значения ребенка. Ребенок может быть либо строкой, либо объектом JS. В предыдущей статье ([nockoutjs experience experience route] (1) KO First Experience) показывает строки, и на этот раз я передам объект:
Код:
<p> Ваша страна: <Select Data-bind = "Опции: viestableCounties, OptionStext: 'CountryName', значение: SelectedCountry, OptionsCaption:« Выберите ... »> </select> </p> <div Data-bind =" Visible: SelectedCountry "> <!-выбирает что-то-> вы выбрали страну с популяцией данных. SelectedCountry (). CountryPopulation: 'неизвестно' "> </span>. </div> <script type =" text/javascript "> // Конструктор для объекта с двумя свойствами Country = function (имя, популяция) {this.countryname = name; this.countrypopulation = population; varemodel = about ablecountries: ablecountries Ko.observablearray ([новая страна («Великобритания», 65000000), Новая страна («США», 320000000), Новая страна («Швеция», 29000000)]), Selectedcountry: Ko.observable () // Скрипт.Вот вариант, чтобы связать опцию «Список», и значение используется для привязки выбранного элемента. Поскольку параметры являются объектами JS, вам необходимо использовать OptionText, чтобы указать дисплей в поле списка. Опции. Если мы установим поле «Многопользовательский список», то мы не можем использовать значение для привязки выбранных элементов. В настоящее время для привязки выбранных элементов следует использовать SelectOptions.
(6) Другие привязки: включить/отключить, hasfocus, проверенный, Uniquenme.
Эти события очень просты в использовании, поэтому я не буду их подробно представить. Последнее имя UniqueName используется для установки уникального атрибута имени управления формой. Когда форма будет представлена на фон, она не будет отправлена на фон без установки значения атрибута имени, поэтому существует такая функция привязки. На официальном веб -сайте существует еще одно относительно распространенное влияние на Hasfoucus:
Имя:
Имя: Берт Бертингтон
Нажмите на имя, чтобы отредактировать его; Нажмите в другом месте, чтобы применить изменения.
Нажатие на название выше может стать редактируемым, а затем потерять фокус, а затем стать обычным текстом. Этот эффект довольно прост в реализации с KO.
Суммировать
Эта статья в основном представляет методы использования различных связей в нокаутировании . Используя комбинацию этих методов привязки, вы можете просто создать страницу пользовательского интерфейса, которая требует более динамических взаимодействий. Самая важная вещь для использования этих методов - это помнить, что все привязки являются функциональными объектами, поэтому вы можете работать непосредственно в HTML, чтобы структура кода JS иногда может быть проще.
Официальное руководство: http://knockoutjs.com/documentation/introduction.html