В предыдущей статье я представил вам комбинацию Bootstraptable и Knockoutjs для реализации функций с добавлением, удалением, модификацией и поиском [1], и ввел некоторые основные использование nockout.js. Далее мы продолжим представлять его вам через эту статью. Если вы планируете использовать KO для выполнения проектов, давайте посмотрим!
Bootstrap-это фронтальная структура, хорошая вещь для освобождения веб-разработчиков. Это показывает, что пользовательский интерфейс очень высокий, атмосферный и высокий клад. Теоретически, вам не нужно писать линию CSS. Просто добавьте соответствующие атрибуты в тег.
Knockoutjs-это JavaScript-разработанный фреймворк MVVM. Очень хороший. Например, после добавления или уменьшения элементов данных списка нет необходимости обновлять весь управляющий фрагмент или записать JS с добавлением и узлами удаления самостоятельно. Просто определите шаблон и атрибуты, которые соответствуют его определениям синтаксиса. Проще говоря, нам нужно только обратить внимание на доступ к данным.
1. Предварительный просмотр эффекта
На самом деле, это не имеет никакого эффекта. Это просто простое дополнение, удаление, модификация и поиск. Ключ все еще в коде. Использование KO может сохранить множество операций привязки данных интерфейса DOM. Ниже приведен код JS для всей логики добавления, удаления, изменения и поиска:
Эффект страницы:
2. Примеры кода
Хорошо, давайте доберемся до сути! Блогер планирует представить его в двух частях. Первая часть - это часть инициализации таблицы, а вторая часть - это добавление, удаление и модификация кнопки.
1. Таблица инициализация
1.1. Подготовка
Сначала посмотрите на файлы JS и CSS, на которые необходимо ссылаться
<link href = "~/content/bootstrap/css/bootstrap.min.css" rel = "styleSheet"/> <link href = "~/content/bootstrap-table/bootstrap-table.min.css" rel = "stylesship"/> <script src = "~/scripts/jquery-1.9. src = "~/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "~/content/bootstrap-table/bootstrap-table.min.js"> </script> <script src = "~/content/bootstrap-table/sacale/souptrap-table-z-cn.js> j.s. src = "~/scripts/nockout/nockout-3.4.0.min.js"> </script> <script src = "~/scripts/nockout/extensions/nockout.mapping-latest.js"> </script> <script src = "~/content/bootstrap-table/nockout.bootStraptable. src = "~/scripts/depart.js"> </script>
Все они широко используются файлы CSS и JS. В основном у нас есть два пользовательских файла JS: nockout.bootStraptable.js и Depart.js. В предыдущей статье мы представили, что использование KO может настроить нашу связку данных. Точно так же для привязки таблицы мы также определяем пользовательскую привязку, код внутри nockout.bootstraptable.js.
// Добавить KO Custom Binding Ko.BindingHandlers.mybootStraptable = {init: функция (элемент, valueaccorse, allbindingsaccors, viewmodel) {// oparam вот связанного ViewModelvar oviewModel = valueAccorsor (); var $ ele = $ (element). Bootstraptable Method to viewmodel oviewmodel.bootStraptable = function () {return $ ele.bootStraptable.apply ($ ele, arguments);}}, обновление: функция (элемент, Valueaccorse, Allbindingsaccor, ViewModel) {}}; // инициализация ($) {// AddTARPABL Ko.bootStraptableViewModel = function (Options) {var that = this; this.default = {search: true, // Поиск таблицы? MinimumCountColumns: 2, // Минимальное количество столбцов разрешенных ClickToSelect: true, // где включить нажмите Select Showtoggle: true,}; arrres;}; // обновить это.Код сомнение: этот файл JS в основном делает две вещи
1. Настройте свойство с добавлением данных MyBootStraptable. Для метода обновления в ko.bindinghandlers.mybootStraptable, не обязательно его определять.
2. Инкапсулируйте Bootstraptable, добавив BootstraptableViewModel в объект KO.
1.2. Начало связывание тега HTML
<Таблица ID = "tb_dept" data-bind = "myBootStraptable: $ root"> <tr> <th Data-checkbox = "true"> </th> <th Data-field = "name"> Имя отдела </th> <th Data-field = "Level"> Уровень отделения </th> <th Data-field = "des"> Описание </th> <th Data-field = "strcrette Время </th> </tr> </teaad> </table>
Код сомнение: Определите тег таблицы и используйте пользовательскую привязку к MyBootStraptable. Как упоминалось в предыдущей статье, $ root может быть понят как значение инициализации. Для простоты все столбцы написаны непосредственно в <Th>.
1.3. Активировать связывание КО
После загрузки страницы начните привязка Ко:
//Initialize $(function () {//1, Init table tableInit.Init();//2, Register the add-on, deletion and modification event operating.operateInit();});//Initialize table var tableInit = {Init: function () {//Binding table viewmodelthis.myViewModel = new ko.bootstrapTableViewModel({url: '/Department/getDepartment', // запрос URL (*) Метод: 'get', // метод запроса (*) на панели инструментов: '#toolbar', // Какой контейнер используется для кнопки инструмента Queryparams: function (param) {return {limit: param.limit, смещение: param.offset};}, // pagination paramreters (*) pagination:*) PAGINATIO боковая павивания: «Сервер», // Метод страниц: клиентская страница клиента, страница сервера сервера (*): 1, // Инициализировать первую страницу для загрузки, по умолчанию PageSize: 10, // Количество строк записей на страницу (*) Pagelist: [10, 25, 50, 100], // количество Rows Page на страницу (*)}}; document.getElementbyId ("tb_dept"));}};Сообщение кода: после загрузки страницы, вызовите объект BootstraptableViewModel, инкапсулированный выше, чтобы объединить пропущенные параметры, и, наконец, активировать привязку и активировать это. MyViewModel в качестве связанного ViewModel. Код отладки показывает, что когда ko.applybindings (this.myviewmodel, document.getelementbyid ("tb_dept")); выполнено; Пользовательская привязка вступит в силу, и программа введет метод init of Ko.BindingHandlers.myBootStraptable объекта для инициализации Bootstraptable. Вот момент, который нужно объяснить:
init: функция (элемент, ValueAccessor, AllBindingSaccsors, ViewModel) {// Опарам здесь - это связанный ViewModelvar oviewModel = valueAccessor (); var $ ele = $ (element) .bootStraptable (oviewmodel.params) ;/ Добавить метод Bootstraptable oviewStraptable. {return $ ele.bootstraptable.apply ($ ele, аргументы);}}В приведенном выше методе init, через второй параметр Valueaccorsor, мы получаем в данный момент в данный момент ViewModel, который является объектом этого. MyViewModel выше. Блогер считает, что это способствует вашему пониманию логики индивидуальной привязки. В основном, когда мы выполняем это предложение var $ ele = $ (element) .bootStraptable (oviewModel.params);, инициализация нашей таблицы завершена. Блогер определяет коллекцию для соответствующего метода в фоновом режиме. Ради полноты, я опубликую это здесь:
DepartmentController
2. Операция кнопки
Выше приведено использовать нашу пользовательскую связку данных посредством инициализации Bootstraptable. Давайте испытаем «Shuangweiwai», используя атрибуты мониторинга, используя приведенную ниже операцию кнопки.
2.1. Просмотр страницы
Во-первых, определите нашу кнопку добавленного удаления на странице просмотра
<div id = "toolbar"> <button id = "btn_add" type = "button"> <span aria-hidden = "true"> </span> add </button> <button Id = "btn_edit" type = "Button"> <span aria-hidden = "true"> modify </button> <tood = "btn_delete" aria-hidden = "true"> </span> delete </button> </div>
Для простоты блоггер использовал скрытое всплывающее окно, чтобы содержать недавно добавленные и отредактированные текстовые поля. Конечно, вообще говоря, вы можете использовать частичные представления здесь, и в вашем проекте может быть редактирование.
<div id = "mymodal" tabindex = "-1" rol = "dialog" aria-labelledby = "mymodallabel"> <div rol = "document"> <div> <div> <button-hides "data-dismiss =" modal "Aria-label =" close "> <span aria-hidden =" true "> </span> </hix4 </4. id = "mymodallabel"> операция </h4> </div> <div> <label for = "txt_departmentname"> имя отдела </label> <input type = "text" name = "txt_departmentname" data-bind = "значение: имя" id = "txt_departmentnam for="txt_departmentlevel">Department level</label><input type="text" name="txt_departmentlevel" data-bind="value:Level" id="txt_departmentlevel" placeholder="departmentlevel"></div><div><label for="txt_des">Description</label><input type="text" name="txt_des" data-bind = "value: des" id = "txt_des" placehalder = "description"> </div> </div> <div> <button Type = "button" data-dismiss = "modal"> <span aria-hidden = "true"> </span> close </button> <button = "id =" btn_submit "data-dismiss =" aria-hidden = "true"> </span> save </button> </div> </div> </div>
2.2. Операция кнопки инициализации JS
//Operation var operation = {//Initialize button event operateInit: function () {this.operateAdd();this.operateUpdate();this.operateDelete();this.DepartmentModel = {id: ko.observable(),Name: ko.observable(),Level: ko.observable(),Des: ko.observable(),CreateTime: ko.observable ()};}, // добавить expartionAdd: function () {$ ('#btn_add'). On ("click", function () {$ ("#mymodal"). modal (). On ("shodf.bs.modal", function () {var oemptymodel = {id: ko.obsab ko.observable (), level: ko.observable (), des: ko.observable (), createtime: ko.observable ()}; ko.utils.extend (operate.departmentmodel, oemptymodel); ko.applybindings (Operate.departmodel,, document.getElementById ("myModal")); operate.operatesave ();}). On ('hidden.bs.modal', function () {ko.cleannode (document.getElementbyId ("myModal"));});});});};//edit operator:});}); {$ ('#btn_edit'). On ("click", function () {$ ("#mymodal"). modal (). On ("show.bs.modal", function () {var arrrictedData = tableInit.myviewModel.getSelections (); if (! Operate.OperateCeck (arrrrrectedData) данных в viewmodelko.utils.extend (operate.departmentmodel, ko.mapping.fromjs (arrrrectedData [0])); ko.applybindings (operate.departmentmodel, document.getelementbyid ("mymodal"); () {// Очистить привязку при закрытии всплывающего окна (это очистка включает в себя очистку и очистку события регистрации) ko.cleannode (document.getElementById ("myModal"));});});});});});}, // delete: function () {##btn_delet ', ",", ",", "). {var arrrrectedData = tableInit.myviewModel.getSelections (); $. ajax ({url: "/depart/delete", тип: "post", contentType: 'Application/json', data: json.stringify (arrrrectedData), успех: функция (данные, статус) {alert (status); // tableInit.myviewmodel.refresh ();}});});});}, // Сохранить данные Operatesave: function () {$ ('#btn_submit'). On ("click", function () {// Извлекать current viewmodelvar oviewmodel = opporting.depart. ViewModel to Data Modelvar Odatamodel = ko.tojs (oviewModel); var funcname = odatamodel.id?"update"""odd"; $.ajax( <url: «/department/«+funcnam {alert (status); tableInit.myviewmodel.refresh ();}});});});}, // проверка данных Operatecheck: function (arr) {if (arr.length <= 0) {alert («Пожалуйста, выберите как минимум одну строку данных»); false;} return true;}}Скептицизм кода: расскажите нам о логике исполнения здесь. Во -первых, Call Operator.operinit (); в методе $ (function () {}). В методе OperatorInit () зарегистрируйте событие нажатия кнопки на странице, а также определите это. DepartmentModel как недавно отредактированная ViewModel. Этот ViewModel определяет атрибуты мониторинга, соответствующие элементам страницы. Вы до сих пор помните некоторые связки данных в всплывающем окне, скрытых выше? Да, соответствующее значение значения в нем соответствует атрибутам мониторинга здесь. После установки привязки все изменения мониторинга в JS, которые приводят к этому. DepartmentModel запустит значение меток привязки на границе раздела для изменения. Напротив, изменение значения значения всех тегов на интерфейсе неизбежно приведет к изменению значений атрибутов мониторинга. Это так называемое двустороннее переплет. Давайте подробно рассмотрим выполнение двустороннего переплета.
2.3. Новые операции
$ ('#btn_add'). On ("click", function () {$ ("#mymodal"). modal (). On ("shod.bs.modal", function () {var oemptymodel = {id: ko.observable (), имя: ko.observable (), ko.observable (), des: des: ko.observable (), des: ko.observable (), ko.observable (), des: ko.observable (), ko.observable ko.observable (), createTime: ko.observable ()}; ko.utils.extend (operate.departmentmodel, oemptymodel); ko.applybindings (operate.departmentmodel, document.getElementById ("myModal")); Operate.Operatesave ();}). On ('hidden.bs.modal', function () {ko.cleannode (document.getElementById ("myModal"));});});Когда наш интерфейс запускает новую операцию, сначала появится скрытая модальная коробка, упомянутая выше. Когда отображается модальная коробка, сначала определите пустую виду, а затем вызовите ko.utils.extend (operate.departmentmodel, oemptymodel); Это предложение будет перезаписать Global Operating.DepartmentModel пустой просмоткой. Функция метода ko.utils.extend () аналогична функции $ .extend () в jQuery. Оба предыдущих объекта объединяются на основе последующих объектов, и после слияния связывание активируется с использованием новой ViewModel. После активации привязки зарегистрируйте событие нажатия кнопки «Сохранить». При добавлении этого появляется модальная коробка. Поскольку все атрибуты мониторинга в ViewModel все пусты, значение соответствующего элемента интерфейса также будет очищено, поэтому мы видим это в новом дополнении:
Когда всплывающее окно закрыто, мы выполняем ko.cleannode (document.getelementbyid ("mymodal")); через закрытое мероприятие. Это предложение очень важно, потому что для того же DOM KO может быть связан только один раз. Если вам нужно снова связать, вам нужно сначала очистить привязку. Кроме того, метод CleanNode () не только очистит привязку, но и очищает события, зарегистрированные в DOM. Вам нужно обратить внимание при его использовании!
2.4. Редактирование операций
$ ('#btn_edit'). On ("click", function () {$ ("#mymodal"). modal (). On ("shod.bs.modal", function () {var rrrrectedData = tableInit.myviewModel.getSelection (); if (! OperAte.OperateCheck (arrrrectedData); с моделью данных для viewmodelko.utils.extend (operate.departmentmodel, ko.mapping.fromjs (arrrectedData [0])); ko.applybindings (operate.departmentmodel, document.getelementbyid ("mymodal"); () {// Очистить привязку при закрытии всплывающего окна (это очищение включает в себя очистку привязки и очистку события регистрации) ko.cleannode (document.getElementById ("myModal"));});});}) ;;Когда мы запускаем операцию редактирования, интерфейс все еще появляется. Во всплывающем событии всплывающего окна мы берем в настоящее время выбранную строку, а затем проверяем, выбрана ли строка. Лучше всего преобразовать обычные объекты JSON в ViewModel с мониторингом атрибутов через предложение ko.mapping.fromjs (arrrectedData [0]). Как упоминалось в предыдущей статье, этот метод требует поддержки файла JS nockout.mapping-latest.js. После преобразования ViewModel по -прежнему обновляется с помощью метода ko.utils.extend (), а затем активирует связывание. Поскольку ViewModel обновляется данными выбранной в настоящее время строки, результатом является:
2.5. Сохранить операцию
После добавления и редактирования всплывающих окнов нажмите «Сохранить» после изменения соответствующей информации, и событие сохранения будет запускается.
$ ('#btn_submit'). On ("click", function () {// Извлекать текущий ViewModelvar oviewModel = operation.DepartmentModel; // конвертировать ViewModel в Data ModelVar Odatamodel = KO.ToJS (oviewModel); odatamodel.id?"update""" codd"; $.ajax( </e Department/"+funcname, type:" post ", data: odatamodel, успех: функция (данные, статус) {alert (status); tableInit.myViewModel.RESH ();});});Когда событие сохранения запускается, мы сначала подключаем к странице ViewModel, то есть Operating.DepartmentModel, а затем используем метод ko.tojs () для преобразования ViewModel с атрибутами мониторинга в объект json с чистыми данными. Этот метод встроен в КО и не требует другой поддержки JS. После получения объекта JSON отправьте запрос AJAX для добавления или редактирования данных. Это отражает двухстороннее переплечение. После значения всех текстовых поля в изменениях интерфейса изменение работы. DepartmentModel также будет запускаться.
2.6 Удалить операцию
О операции удаления нечего сказать и не имеет ничего общего с Ко.
3. Резюме
Вышеуказанное вводит совместное использование KO и Bootstraptable с помощью простого дополнения, удаления, модификации и поиска. KO может освободить вас от DOM и сосредоточиться на ViewModel. Глядя на весь код JS, вы вряд ли можете увидеть val (), text () и другие операции jQuery для получения и назначения значений интерфейсу DOM. Это выглядит чисто, освежает, а также высокий? Конечно, это может быть просто одни из более основных использования KO. В конце концов, блоггеры изучают KO только 3 дня, и необходимо изучить более продвинутые использование. Когда вы привыкнете к этому через некоторое время, вы поделитесь некоторыми из его продвинутых употреблений со всеми. Если вы думаете, что эта статья может помочь вам понять принцип KO и ее использования, вы также можете порекомендовать ее. Редактор благодарен за это здесь!
Выше приведено все содержимое комбинации Bootstraptable и KnockoutJs для реализации функции добавления, удаления, модификации и поиска [2]. Я надеюсь, что это будет полезно для всех!