Bootstrap-это фронтальная структура, хорошая вещь для освобождения веб-разработчиков. Это показывает, что пользовательский интерфейс очень высокий, атмосферный и высокий клад. Теоретически, вам не нужно писать линию CSS. Просто добавьте соответствующие атрибуты в тег.
Knockoutjs-это JavaScript-разработанный фреймворк MVVM. Очень хороший. Например, после добавления или уменьшения элементов данных списка нет необходимости обновлять весь управляющий фрагмент или записать JS с добавлением и узлами удаления самостоятельно. Просто определите шаблон и атрибуты, которые соответствуют его определениям синтаксиса. Проще говоря, нам нужно только обратить внимание на доступ к данным.
1. Введение в nockout.js
1. nockout.js и mvvm
В настоящее время различные фронтальные рамки являются ошеломляющими и ослепительными. Иногда мне приходится вздохнуть, что как программист действительно сложно, всегда есть бесконечные методы, которые нужно учиться. Когда это закончится, если вы не преобратесь! Море страданий безгранично, и будь то берег, когда вы оглядываете назад, зависит от вас!
Nockout.js-это легкая передняя структура, основанная на режиме MVVM. Насколько это свет? Согласно последней версии V3.4.0, отображаемой на официальном сайте, это всего лишь 22 КБ. Он может обрабатывать привязку между моделью данных и интерфейсом DOM дружественным образом. Самое главное, что его обязательство является двунаправленной. То есть, если изменяется модель данных, данные на интерфейсе DOM также изменятся соответствующим образом. И наоборот, если данные на интерфейсе DOM изменяются, модель данных также будет изменяться соответственно. Это может значительно уменьшить объем нашего интерфейса кода и сделать наш интерфейс простым в обслуживании, и нам больше не нужно писать много моделей данных мониторинга событий и изменений DOM интерфейса. Блогер проиллюстрирует эти два момента на основе примера использования ниже.
Nockout.js Официальный веб -сайт: http://knockoutjs.com
Nockout.js Адрес с открытым исходным кодом: https://github.com/knockout/knockout
Режим MVVM: это модель дизайна для создания пользовательских интерфейсов. MVVM разбивает его на три части, а именно: модель, просмотр и ViewModel, модель - это модель данных, представление - это наше представление, а ViewModel - это модель View, используемая для привязки модели данных и элементов DOM в представлении. Если вы использовали WPF и Silverlight, понимание этого не должно быть проблемой; Это не проблема, чтобы не использовать его. Прочитав эту статью, у вас будет общее понимание.
2. Самый простой пример
Вообще говоря, если вы используете nockout.js с нуля, вам нужно сделать хотя бы следующие четыре части
2.1. Перейдите на официальный сайт, чтобы загрузить файл nockout.js, а затем процитировать его на страницу просмотра.
<script src = "~/scripts/nockout/nockout-3.4.0.min.js"> </script>
Примечание: nockout.js не требует поддержки jQuery. Если ваш проект требует операций, связанных с jQuery, см. JQuery; В противном случае ссылайтесь только на приведенные выше файлы.
2.2. Определить ViewModel
Что такое ViewModel? На самом деле, в JS это выглядит как объект JSON. Мы определяем ViewModel:
var myviewmodel = {name: "lilei", профессия: "Инженер программного обеспечения",};2.3. Определите тег, который связывает связку данных в представлении.
<div> Имя: <label data-bind = "text: name"> < /label> <br /> Профессия: <input type = "text" data-bind = "textInput: profession" /> < /div>
ПРИМЕЧАНИЕ. TextInput требуется для текста, соответствующего входным тегам, в то время как Текст для текста для обычных тегов требуется.
2.4. Активировать связывание
После выполнения трех вышеупомянутых шагов вам также необходимо активировать связывание нокаута
ko.applybindings (myviewmodel);
Выполняя эти четыре части, в основном реализуется простая привязка данных ViewModel. Получите эффект:
Если вы достаточно осторожны, вы обнаружите, что метод ko.applybindings () имеет два параметра. Первое - это то, что мы должны связать, и что является вторым? От ko.applybindings (myviewmodel); Мы видим, что второй параметр является необязательным параметром, который представляет область применения тега, связанного с ViewModel. Например, давайте изменим приведенный выше код:
<div> Имя: <label id = "lb_name" data-bind = "text: name"> < /label> <br /> Профессия: <input type = "text" data-bind = "textInput: profession" /> < /div> ko.applybindings (myViewModel, document.getElementByid ("lb_Name"));Получите результат:
Исходя из этого, мы видим, что второй параметр определяет область действия MyViewModel, то есть только привязка на метке ID = "lb_name" вступит в силу. Если второй параметр является меткой контейнера, такой как DIV, это означает, что область привязки является подколовкой ниже Div.
3. Мониторинг атрибутов
Начиная с четырех вышеупомянутых шагов, мы не видим никакого эффекта. То, что мы видим, является не чем иным, как связывание данных объекта JSON с тегом HTML. Какой смысл сделать это? Разве это не усложняет простые проблемы? Не волнуйтесь, сразу же засвидетельствуйте чудо! Как упоминалось выше, наиболее важное значение нокаута заключается в двустороннем связывании. Так как же достичь наше двустороннее привязка? Ответ - мониторинг атрибутов.
В нокауте в сердечнике есть три атрибута мониторинга: наблюдаемые, зависимые отдержки, vaselearray. Значение наблюдения транслируется как наблюдение и наблюдение. Если кажется неуместным сказать, что это атрибут наблюдения или атрибут наблюдения, мы на времена назваем это атрибутом мониторинга.
3.1. Наблюдаемые: мониторинг свойства
Давайте изменим приведенный выше пример на это:
<Head> <meta name = "viewport" content = "width = device-width"/> <title> index3 </title> <script src = "~/scripts/jquery-1.9.1.min.js"> </script> <script src = "~/scripts/nockout/nockout-3.0.min.js"> </screl> </screl> </script> </screl> </screl> </screl> </screl> </screl> </screl> </screl> </screl> </screl> </screl> </screl> </scl data-bind="text:Name"></label><br />Profession: <input type="text" data-bind="textinput:Profession" /></div><div><input type="text" id="txt_testobservable" /></div><script type="text/javascript">//1.Define ViewModelvar myViewModel = {Name: ko.observable ("lilei"), профессия: "Инженер программного обеспечения",}; // 2. Активируйте привязку ko.applybindings (myviewmodel); $ (function () {// regist textchange event $ ("#txt_testobservable"). On ("input", function () {myviewmodel.name ($ (this) .val ());});});Значение этого предложения состоит в том, чтобы добавить свойство имени ViewModel в свойство мониторинга. Свойство названия должно стать собственностью мониторинга. Волшебная вещь произойдет. Давайте посмотрим, когда мы пишем MyViewModel.:
Имя изменилось от исходного свойства на метод, то есть после добавления ko.observable () соответствующее свойство станет методом. Следовательно, значение и назначение имени необходимо обрабатывать с помощью myviewmodel.name (). Давайте посмотрим на эффект:
Код сомнение: очевидно, что myviewmodel.name ($ (this) .val ()); Это предложение присваивает значение текущего текстового поля на свойство имени. Поскольку интерфейс связывает свойство имени, значение в метке также меняется соответственно. Или вы бы сказали, что это можно сделать с помощью события TextChange. Пока значение текущего текстового поля присваивается тегу метки, этот эффект может быть достигнут, что ничто. Действительно, ваш метод написания также может достичь цели, но значимость нашего атрибута мониторинга состоит в том, что когда значение имени изменяется в любом месте, интерфейс будет соответствующим образом изменяться, не присваивая значения тегам метки в каждом месте. В JS вам нужно сосредоточиться только на myviewmodel.name (). Разве это не очень круто ~~
3.2. В зависимости
Если вы прочитали атрибуты мониторинга выше, вы еще не удовлетворены? Давайте посмотрим на использование атрибутов мониторинга зависимости.
Давайте изменим код и посмотрим:
<head><meta name="viewport" content="width=device-width" /><title>Index3</title><script src="~/scripts/jquery-1.9.1.min.js"></script><script src="~/scripts/knockout/knockout-3.4.0.min.js"></script></head><body><div> Name: <input type = "text" data-bind = "textInput: name" /> <br /> Профессия: <input type = "text" bind = "textInput: profession" /> <br /> /> Описание: <label Data-bind = "text: des"> < /label> < /div> <script type = "text /javascript"> / /1.definition myVModelvar myVModelvar myVModelvar myVModelvar = namoDelvar = namoDelv ko.observable ("lilei"), профессия: ko.observable ("Инженер программного обеспечения"),}; myviewmodel.des = ko.dependentobservable (function () {return "i am am am am am am am am am am am am am is a em is amprofession ();///2. Активировать связывание ko.applybindings (myviewmodel); </script> </body>Давайте посмотрим на эффект:
Сообщение кода: добавив атрибут зависимости мониторинга Ko.pecatendentObservable (), значение атрибута DES можно одновременно отслеживать изменения в изменениях имени и профессора. Если кто-либо из них изменится, DES-связанный тег вызовет изменение. Самым большим преимуществом этого является предотвращение работы с DOM от JS, что интересно.
3.3. Наблюдаемый Мониторинг массивов
В дополнение к двум вышеуказанным, KO также поддерживает мониторинг объектов массива. Давайте посмотрим на пример:
<head><meta name="viewport" content="width=device-width" /><title>Index3</title><script src="~/scripts/jquery-1.9.1.min.js"></script><script src="~/scripts/knockout/knockout-3.4.0.min.js"></script></head><body><div><select data-bind = "options: deptarr, option stext: 'name'"> </select> </div> <div> <input type = "text" id = "txt_testobservable"/> <input type = "button" id = "btn_test" varue = "new Department"/> </div> <spcript type = "javascript"> varear = aptArsabr = k. 1, Имя: 'R & D Department'}, {id: 2, name: 'Административный отдел'}, {id: 3, name: 'Департамент по делам человеческих дел'}]); var viewmodel = {deptarr: deptarr,}; ko.applybindings (viewModel); var i = 4; $ () {$ btn_tept); {deptarr.push ({id: i ++, имя: $ ("#txt_testobservable"). val ()});});}); </script> </body>Проверьте эффект:
Код сомнение: приведенный выше метод ko.observablearray () добавляет мониторинг объектов массива. То есть где угодно в JS, если изменения массива внесены в объект массива DEPTARR, пользовательский интерфейс будет вызван, чтобы дать соответствующий. Следует отметить, что массив мониторинга на самом деле является самого контролируемого объекта массива, и его нельзя контролировать на предмет изменений в свойствах дочернего объекта в объекте массива. Например, мы меняем событие Click на это:
$ (function () {$ ("#btn_test"). On ("click", function () {deptarr [1] .name = "aaa";});});Эффект:
Это показывает, что мониторинг массива фактически контролирует сам объект массива и не будет следить за изменениями в атрибутах элементов в массиве. Если вам действительно нужно отслеживать изменения объектов свойства в данных, вам необходимо использовать ko.observable () для свойства объектов в данных, и они используются вместе. Если вам интересно, вы можете попробовать.
4. Общие атрибуты связок данных в KO
В вышеперечисленном мы использовали несколько атрибутов связок данных, так что в нокауте существует много таких атрибутов связывания данных? Здесь мы перечислим некоторые часто используемые свойства.
4.1. Текст и входной текст
Текст, как следует из названия, означает текст. Этот атрибут привязки обычно используется для отображения текста с тегами, такими как <babel>, <pan>, <div> и т. Д. Конечно, если хотите, это привязка может использоваться для любого тега. В основном нечего сказать об этом. Если ko.observable () не используется, это статическое связывание, в противном случае это динамическое связывание.
Inputext, текст входного тега, эквивалентен атрибуту значения тега ввода.
<div> Имя: <label data-bind = "text: name"> </label> <br/> Профессия: <input type = "text" data-bind = "textInput: profession"/> </div> //1.define viewModelvar myviewModel = {name: ko.observable ("lilei"), профессия: "Инженер программного обеспечения",}; Активировать привязку ko.applybindings (myviewmodel);4.2. Ценить
Это свойство привязки обычно используется для входных тегов, что в основном похоже на приведенный выше Tinptext. Но значение более стандартизировано.
Также используется значение параметра, которое указывает на работу интерфейса, когда значение обновляется. Основные значения valueUpdate включают в себя изменение/KeyUp/KeyPress/AfterkeyDown и т. Д. Это указывает на значение ViewModel, соответствующего значению, когда изменяется текст, сокращение клавиатуры, нажатие клавиатуры, нажатие клавиатуры, нажатие клавиатуры и т. Д.
Имя: <input type = "text" data-bind = "value: name, valueupdate: 'keyup'" /> <br /> var myviewmodel = {name: ko.observable ("lilei"),}; // 2. Активировать привязку ko.applybindings (myviewmodel);Приведенный выше код указывает, что атрибут значения текстового поля и атрибут имени MyViewModel обновляется при закрытии клавиатуры.
4.3. Проверял
Проверенная привязка обычно используется для флажок, радио и других элементов формы, которые могут быть выбраны, а соответствующим значением является тип Bool. Использование значения в основном похоже, поэтому я не буду повторять его.
4.4. давать возможность
Включение связывания обычно используется для включения элементов метки и обычно используется для включения и отключения элементов формы. Вопреки отключению, соответствующим значением также является тип Bool.
<div> <input type = "text" data-bind = "enable: ismen"/> </div> <script type = "text/javascript"> // 1. define viewmodelvar myviewmodel = {name: ko.observable ("lilei"), профессия: ko.observable ("Инженер программного обеспечения"), возраст: AGE: ko.observable (40), Ismen: Ko.observable (true)}; // 2. Активируйте привязку ko.applybindings (myviewmodel); myviewmodel.ismen (false); </script>Поскольку свойство Ismen становится ложным, все соответствующие текстовые поля будут отображать статус отключенного.
4.5. неполноценный
Вопреки включению, использование похоже на включение.
4.6 параметры
В вышеперечисленном параметрах использовались при использовании Select Sinting, который представляет набор параметров тега SELECT, а соответствующее значение представляет собой массив, представляющий источник данных этого раскрывающегося блока. Мониторинг этого источника данных может быть включен с использованием ObservableArray. Смотрите выше для использования.
4.7.html
Связывание текста на самом деле является настройкой и значением внутреннего текста тега. Аналогичным образом, HTML -связывание также является настройкой и значением Innerhtml. Его соответствующее значение - HTML -тег.
4.8. CSS
Привязка CSS состоит в том, чтобы добавить или удалить один или несколько стилей (классы) в элемент DOM. Используйте формат:
<Style Type = "text/css">. testbold {founal-color: pourchblue;} </style> <div data-bind = "css: {testbold: myviewmodel.name () == 'lilei'}"> aaaa </diviewmodel. Инженер "), возраст: ko.observable (40)};Этот Div отобразит цвет фона.
Если вам нужно добавить или удалить несколько стилей, просто измените их слегка, например:
<div data-bind = "css: {testbold: myviewmodel.name () == 'lilei', testborder: myviewmodel.profession () == 'Php Engineer'}"> aaaa </div>4.9. Стиль
Если функция привязки CSS состоит в том, чтобы динамически добавлять или удалить стили классов в тег, то функция связывания стиля состоит в том, чтобы динамически добавить или удалить определенный стиль в тег. например:
<div data-bind = "css: {founal-color: myviewmodel.name () == 'lilei'? 'red': 'white'}"> aaaa </div>Если вы добавите или удалите несколько, как использовать привязку CSS
4.10, атри
Привязка ATTR в основном используется для добавления и удаления одного или нескольких атрибутов (включая пользовательские атрибуты) в тег и аналогична CSS.
4.11. Нажимать
Нажмите «Привязка» означает добавление метода выполнения событий Click в соответствующий элемент DOM. Можно использовать на любом элементе.
<div> <input type = "button" value = "test click binding" data-bind = "click: clickfunc" /> < /div> var myviewmodel = {clickfunc: function () {alert ($ (event.currentTarget) .val ());}}; ko.applyBindings (myViewModel);Event.currentTarget представляет элемент DOM, который в настоящее время нажимается. Иногда для простоты мы напрямую используем анонимные функции для привязки, например:
<div> <input type = "button" value = "test click binding" data-bind = "click: function () {alert ('clicked');}" /> < /div>Тем не менее, этот способ написания JS в HTML затрудняет принятие блоггеров, и они чувствуют, что относительно неудобно поддерживать, особенно когда логика в событии Click немного сложна. Поэтому, если это не необходимо, не рекомендуется напрямую писать эту анонимную функцию.
4.12. Другие
Для всех привязков связывания данных вы можете увидеть введение на официальном веб-сайте, и я не буду перечислять их здесь. Когда вам это нужно, просто перейдите на официальный сайт, чтобы проверить его. Взгляните на все привязки, перечисленные на официальном сайте:
5. Преобразование и связь между объектами JSON и атрибутами мониторинга
Мы знаем, что для того, чтобы избежать прямых методов представления на разных языках, в целом мы используем данные формата JSON при взаимодействии с интерфейсом и задняя частью. Мы используем модель данных, извлеченную из контрольных запросов HTTP. Чтобы использовать некоторые из функций нашего KO, мы должны преобразовать эти обычные модели данных в атрибуты мониторинга KO; И наоборот, мы используем атрибуты мониторинга KO, и иногда нам нужно преобразовать эти атрибуты в обычные данные JSON и передавать их на задний план. Так как же достичь этого преобразования?
5.1. Преобразовать объект json в ViewModel
Например, мы выбираем объект JSON с фона, затем превращаем его в нашу ViewModel, а затем связываем его с нашим интерфейсом DOM.
$ .ajax ({url: "/home/getData", тип: "get", data: {}, успех: function (data, status) {var Ojson = data;}});Мы отправляем запрос на бэкэнд, принимаем объект JSON, назначаем значение Ojson, а затем мы конвертим Ojson в ViewModel. Наиболее интуитивно понятный способ преобразовать его вручную. Например, мы можем сделать это:
var myviewmodeljson = {deptname: ko.observable (), deptlevel: ko.observable (), deptdesc: ko.observable ()}; ko.applybindings (myviewmodeljson);Затем в успехе, запрошенном Ajax
Успех: function (data, status) {var ojson = data; myviewmodeljson.deptname (ojson.deptname); myviewmodeljson.deptlevel (ojson.detplevel); myviewmodeljson.deptdesc (ojson.deptdesc);};};};};};};};Таким образом, с помощью ручного связывания реализовано связывание объекта JSON с ViewModel. Преимущество этого - гибкость, недостаток очевиден, количество ручного кода слишком велика.
К счастью, с нашим универсальным открытым исходным кодом всегда есть люди, которые придумывают лучший способ. Мы можем использовать компонент нокаута, чтобы помочь нам преобразовать объект интерфейса JSON в ViewModel.
nockout.mapping Address с открытым исходным кодом: скачать
Давайте кратко рассмотрим, как он используется, или пример выше. Нам не нужно реализовать определение любого ViewModel. Во -первых, нам нужно обратиться к nockout.mapping.js
<script src = "~/scripts/nockout/nockout-3.4.0.min.js"> </script> <script src = "~/scripts/nockout/endensions/nockout.mapping-latest.js"> </script>
Примечание. Здесь Knock.mapping-last.js должен быть помещен за нокаутом-3.4.0.min.js, в противном случае Ko.mapping не может быть вызвано.
Затем используйте его непосредственно в функции успеха
Успех: function (data, status) {var myviewmodeljson2 = ko.mapping.fromjs (data); ko.applybindings (myviewmodeljson2);}Посмотрим на эффект:
Код сомнение: объект JSON, полученный из фона с помощью запроса AJAX, удобно преобразуется в ViewModel через ko.mapping.fromjs (). Разве это не остро? Конечно, в дополнение к этому использованию, вы также можете обновить существующую ViewModel и использовать ее следующим образом:
var myViewModelJson = {DeptName: ko.observable(),DeptLevel: ko.observable(),DeptDesc:ko.observable()};ko.applyBindings(myViewModelJson);$(function () {$.ajax({url: "/Home/GetData",type: "get",data: {}, успех: function (data, status) {ko.mapping.fromjs (data, myviewmodeljson)}});});В успехе обновите ViewModel MyViewModeljson в соответствии со значением данных.
5.2. Конвертировать ViewModel в объект JSON
Вышеупомянутое, что объекты JSON преобразуются в ViewModel, так что мы должны делать, если нам нужно преобразовать ViewModel в объекты JSON и передать ее в бэкэнд?
В нокаут представлены два метода:
• ko.tojs (): конвертировать ViewModel в объект json
• ko.tojson (): конвертировать ViewModel в сериализованную строку JSON.
Например, наш код заключается в следующем:
$ (function () {var ojson1 = ko.tojs (myviewmodeljson); var ojson2 = ko.tojson (myviewmodeljson);}); var myviewmodeljson = {deptname: ko.observable ("r & d отдел"), deptlevel: ko.observable ("2"), deptable ("r & d department"), deptlevel: ko.observable ("), Deptable (" r & d Department ", Deptlevel: ko.observable ("), deptable ("r & d. ko.observable ("группа разработки")}; ko.applybindings (myviewmodeljson);Затем давайте следим за значениями Ojson1 и Ojson2:
Код сомнение: через картинку выше, легко понять разницу между двумя методами. Здесь следует отметить, что эти два метода встроены в КО и не требуют поддержки компонента отображения.
6. Создайте свой собственный атрибут связывания данных
Я так много говорил выше, и я представлю некоторую привязку и мониторинг в нокауте. Таким образом, иногда нам нужно настроить наше связывание данных, например: <label data-bind = "mybind: name"> </label>. Это требование особенно полезно при инкапсуляции компонентов. Можно ли это реализовать? конечно.
В нокауте свойство KO.-BindingHandlers предоставляется для настройки свойства связывания данных. Его синтаксис выглядит следующим образом:
ko.bindinghandlers.myselect = {init: function (element, valueaccors, allbindingsaccorsor, viewmodel) {}, обновление: функция (элемент, valueaccors, allbindingsaccors, viewmodel) {}};Просто объявите это так, а затем вы можете использовать пользовательскую связующую данные в нашем теге HTML.
<div> <select data-bind = "myselect: $ root"> <опция id = "1"> отдел R & D </option> <option id = "2"> Департамент по делам людей </option> <option id = "3"> Административный отдел </option> </selet> </div>
MySelect - это наше собственное свойство для привязки. $ root может быть понят как инициализация на данный момент (хотя это объяснение не является строгим, если есть более разумное объяснение, пожалуйста, не стесняйтесь исправить его).
Сообщение кода: приведенные выше KO. -связки могут использоваться для простого реализации пользовательских свойств привязки. Два момента необходимо объяснить:
• init, как следует из названия, инициализирует пользовательскую привязку. Он содержит несколько параметров. Первые два параметра обычно используются чаще. Первый параметр представляет элемент DOM, который инициализирует пользовательскую привязку, а второй параметр обычно используется для передачи инициализированных параметров.
• Обновить, обновить обратный вызов, когда будет введен соответствующий атрибут мониторинга, этот метод будет введен. Если обратный вызов не требуется, этот метод может быть неэкладован.
Здесь блоггер кратко объяснит использование пользовательских привязков на основе раскрывающейся компонента Box Mutiselect, которым он поделился.
6.1. Самый простой мутизмет
Вообще говоря, если нам нужно использовать KO для инкапсуляции некоторых общих компонентов, нам нужно использовать наши KO. -связки. Блоггер обсудит, как использовать его в сочетании с компонентом Mutiselect.
Сначала объявьте настраиваемые KO.BindingHandlers и инициализируйте наш тег SELECT в методе Init
ko.bindinghandlers.myselect = {init: function (element, valueaccors, allbindingsaccessor, viewmodel) {$ (element) .multiselect ();}, обновление: функция (элемент, Valueaccorsor, allbindingsaccorsor, viewmodel) {}};Затем используйте его в теге страницы
<div style = "text-align: center;"> <select data-bind = "mySelect: $ root"> <опция идентификатор = "1"> отдел R & D </option> <опция id = "2"> Департамент по делам людей </option> <option id = "3"> Административный отдел </option> </select> </div>
Последняя третья часть, активируйте связывание
$ (function () {var multiSelect = {}; ko.applybindings (multiSelect);});Если вам не нужно передавать параметры, вам нужно только привязывать пустую просмотр. Некоторые люди озадачены, но третья часть не считает, что это практично. Понимает блоггер, что элемент DOM должен использовать Data-Bind для привязки данных, а привязка KO должна быть включена, что является KO.ApplyBindings () здесь.
Получите эффект:
6.2. Прохождение параметра
Первый шаг - настройка KO.BindingHandlers
ko.bindinghandlers.myselect = {init: функция (элемент, valueaccors, allbindingsaccorsor, viewmodel) {var oparam = valueaccessor (); $ (element) .multiselect (oparam);}, обновление: функция (element, valueaccessor, allbindingsaccessor, viewmodel) {}Второй шаг такой же, как и выше, используйте эту пользовательскую привязку в теге HTML.
Шаг 3: Пропустите параметры при активации привязки
$ (function () {var multiSelect = {eNableClickableOptGroups: true, // COLLAPSE GURGING ONCHANGE: function (опция, проверка) {alert ("select change");}}; ko.applybindings (multiSelect);});Через эти три шага вы можете передать параметры в инициализацию нашего мутизмета:
Запросы кода: второй параметр события INIT, мы сказали, что его основная функция - получить параметры, передаваемые из нашей ViewModel, но здесь нам нужно использовать его в качестве метода. Почему он так много используется, еще предстоит изучать!
2. Первый пример добавления, удаления, изменения и поиска
На данный момент, основные вещи наконец -то были выложены. Первоначально я планировал завершить их в одной статье, но я не ожидал, что основные вещи будут расширены так много! Примеры добавления, удаления, модификации и проверки включены в следующую статью. Bootstraptable и NockoutJs объединяются, чтобы реализовать функцию добавления, удаления, модификации и проверки [2]. Добро пожаловать, чтобы учиться и общаться, и, конечно, вы также можете порекомендовать его!