ПРЕДИСЛОВИЕ: Блоггер поделился некоторыми основными использованием нокаутированных и начальных чисел. Все они являются основными приложениями, и они вообще не инкапсулируются. Они просто избегают значения и назначения управления HTML и далеко не показывают изысканность MVVM. В последнее время проект планирует официально использовать KO, поэтому он сделал немного упаковки для KO и Bootstraptable, и он разделен здесь для справки Park Friends. Для идей упаковки, пожалуйста, обратитесь к мастеру парка блога Сяо Цинь. Если у друзей парка лучше, пожалуйста, не стесняйтесь обсудить это.
Статьи серии nockoutjs:
Bootstraptable и NockoutJs объединяются для достижения функции добавления, удаления, модификации и проверки [1]
Bootstraptable и NockoutJs объединяются для достижения функции добавления, удаления, модификации и проверки [2]
1. Первая ViewModel обрабатывает запрос
Реализация демонстрации еще предстоит продолжить функцию управления департаментом в последний раз. Следующее расширение объясняется по потоку данных.
1. Фон возвращает реализацию ViewModel в представление
public actionResult index () {var model = new {tableParams = new {url = "/department/getDepartment", // pagesize = 2,}, urls = new {delete = "/depart/delete", edit = "/deviret/edit", add = "/depart/edit",}, QueryCondition = new {name = ","/"/edit",}, QueryCondition = "? View (model);}Код сомнение: возвращенная здесь модель содержит три варианта
• TableParams: Таблица страницы Параметры инициализации. Поскольку параметры по умолчанию определены в JS, установленные здесь параметры являются параметрами инициализации, специфичной для страницы.
• URL -адреса: путь URL, содержащий запрос на добавление, удаление и модификацию.
• Запрос: условия запроса страницы.
2. Код страницы CSHTML
Код страницы index.cshtml выглядит следующим образом:
@{Layout = null;} <! Doctype html> <html> <head> <meta name = "viewport" content = "width = device-width"/> <tite> index </title> <link href = "~/content/bootstrap/css/bootstrap.min.css" rolf = " href = "~/content/bootstrap-table/bootstrap-table.min.css" rel = "stylesheet"/> <script src = "~/scripts/jquery-1.9.1.min.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.min. src = "~/content/bootstrap-table/bootstrap-table.min.js"> </script> <script src = "~/content/bootstrap-table/locale/bootstrap-table-Zh-cn.js"> </script> <script src = "~/scripts/nockout/nockout-3.4.0.0.min src = "~/scripts/nockout/nockout-3.4.0.min.js"> </script> <script src = "~/scripts/nockout/extensions/nockout.mapping-latest.js"> </script> <script src = "~/scripts/extensions/nockout.index.js"> <cript> <cript> <cript> src = "~/scripts/extensions/nockout.bootstraptable.js"> </script> <script type = "text/javascript"> $ (function () {var data = @html.raw (newtonsoft.json.jsonconvert.serializeobject (model)); document.getElementById("div_index"));});</script></head><body><div id="div_index" style="padding:0px;overflow-x:hidden;"><div><div>Query conditions</div><div><form id="formSearch"><div><label>Department name</label><div><input type="text" data-bind = "value: QueryCondition.name"> </div> <babel> Описание отделения </label> <div> <input type = "text" data-bind = "value: QueryCondition.des"> </div> <div style = "text-align: right; type = «Кнопка" data-bind = "click: QueryClick"> Query </button> </div> </form> </div> </div> <div id = "toolbar"> <кнопка Data-bind = "click: addclick" type = "button"> <span aria-hidden = "true"> </span> add </button> <button-bind = "eDitclclclclicl ="> "</span> add </button> <button-bind =". ARIA-hidden = "true"> </span> Modify </button> <кнопка данных-bind = "click: deleteclick" type = "button"> <span aria-hidden = "true"> </span> delete </button> </div> <table Data-bind = "th-bootstraptable: bootstraptable"> <tr> <th Data-checkbox = "true"> </th Th Имя </th> <th Data-field = "level"> Уровень отделения </th> <th Data-field = "des"> Описание </th> <th Data-field = "strCreatetime"> Время создания </th> </tr> </tead> </table> </div> </body> </html>Сообщение кода: Как и в предыдущей статье, вам нужно цитировать JQUERY, Bootstrap, Bootstraptable, нокаут и другие связанные файлы. Вот следующие два документа:
• nockout.index.js: инкапсулирует свойства и привязки событий, связанные со страницей запроса.
• nockout.bootstraptable.js: инкапсулирует инициализацию Bootstraptable и настраивает методы связывания нокаута.
Все вышеперечисленные взаимодействия страниц инкапсулируются в общественном JS, поэтому нет необходимости писать большое количество дублирующихся кодов, таких как элементы DOM для получения назначений, привязки событий и т. Д. На странице. На этой странице написано только два выше двух предложения JS. Разве это не очень легко?
3. Encapsulation
Давайте посмотрим на два файла JS, упомянутые выше, nockout.bootstable.js и nockout.index.js.
(1) nockout.bootstraptable.js
(function ($) {// добавить метод BootstraptableViewModel в KO.BootStraptableViewModel = function (опции) {var that = this; this.default = {toolbar: '#toolbar', // Какой контейнер для кнопки инструмента Queryparams: function (param) {return {limit: param.limit, offset: offset: offset: offset: inftset: inftset: inftset: inftset: inftset: inftset: inftset:? Параметры (*) Пеленация: true, // Do Do Dise Pagination Display (*) Боковой панирование: «Сервер», // Метод лиц: клиентская страница, страница сервера сервера (*): 1, // инициализируйте первую страницу для загрузки, по умолчанию. Чтобы быть выбранным (*) Метод: «Получить», поиск: True, // Поиск таблицы будет отображаться? ClickToSelect: true, // делает ли Click, чтобы выбрать строки, включено Showtoggle: true,}; this.params = $. () {that.bootStraptable ("refresh");};}; // Добавить Ko Custom Binding Ko.BindingHandlers.bootStraptable = {init: функция (элемент, ValueAccorsor, AllBindingSaccors, ViewModel) {// Опарам здесь - это связанный viewModelvar oviewmodel = valueacessor (); $ (element) .bootStraptable (oviewModel.params); // Добавить метод Bootstraptable к ViewModel oviewModel.bootStraptable = function () {return $ ele.bootStraptable.apply ($ ele, аргументы);}}, обновление: функция (element, valueCcessor, allbindingSaccor. {}};}) (jQuery);Код сомнение: приведенный выше код в основном делает две вещи
1. Индивидуальная вида, инициализированная Bootstraptable.
2
Добавьте KO пользовательские привязки.
Если друзья парка не понимают использования пользовательской привязки, вы можете проверить первые два сообщения в блоге блоггера (один) и (два) для подробного введения.
(2) nockout.index.js
(function ($) {ko.BindingViewModel = function (data, bindElement) {var self = this; this.queryCondition = ko.mapping.fromjs (data.queryCondition); this.defaultQueryparams = {queryParams: function (params) {var params = self.queryCondition; param.offset; return params;}}; var tableparams = $. (key, value) {// clear if (typeof (value) == "function") {this (''); $ ('<div id = "mymodal" tabindex = "-1" rol = "dialog" aria-labelledby = "mymodallabel"> </div>'); dialog.load (data.urls.edit, null, function () {}); $ ("body"). {// Очистить привязку при закрытии всплывающего окна (это очистка включает в себя очистку привязки и очистку события регистрации) ko.cleannode (document.getElementbyId ("formedit")); dialog.remove (); self.bootStraptable.refresh ();};}; // Edit Event this.editClick = ractictAdDATA = ractedDATA = ractictADDATA = ractictAdDATA = ractictAdDATA) self.bootStraptable.getSelections (); if (arrrrectedData.length <= 0 || arrrrectedData.length> 1) {alert ("Редактировать только одну строку за раз"); return;} var dialog = $ ('<div id = "mymodal" tabIndex = "-1" dialog " Aria-labelledby = "mymodallabel"> </div> '); dialog.load (data.urls.edit, arrricteddata [0], function () {}); $ ("body"). Append (Dialog); Dialog.modal (). Привязывание и очистка события регистрации) ko.cleannode (document.getElementbyId ("formedit")); dialog.remove (); self.bootStraptable.refresh ();});}; // Удалить событие this.deleteclick = function () {varrrectedData = selfStraptable.GetSlections () us arrrrectedData = selfStraptable.getSlections (); (! arrrrectedData || arrrrectedData.length <= 0) {alert («Пожалуйста, выберите хотя бы одну строку»); return;} $. {alert (status); self.bootstraptable.refresh ();}});}; ko.applybindings (self, bindelement);};}) (jquery);Сообщение кода: это JS в основном инкапсулирует атрибуты и связывание событий элементов страницы, и несколько мест, которые необходимо объяснить
• this.QueryCondition = ko.mapping.fromjs (data.queryCondition): Цель этого предложения состоит в том, чтобы преобразовать условия запроса, передаваемые из фона из данных JSON в атрибуты мониторинга. Только путем выполнения этого предложения могут контролироваться атрибуты, а элементы страниц контролируются в обоих направлениях.
• self.bootStraptable.refresh (): значение этого предложения состоит в том, чтобы обновить данные таблицы. На самом деле это метод обновления Bootstraptable, который называется, но блоггер просто инкапсулирует его в файл nockout.bootstraptable.js.
• dialog.load (data.urls.edit, null, function () {}): при добавлении и редактировании используется метод jQuery load (). Функция этого метода состоит в том, чтобы запросить элементы страницы этого URL и выполнить код JS соответствующей страницы URL. Этот метод очень мощный в динамическом обращении к файлу JS и выполнению кода внутри файла JS.
Наконец, прикрепите код, соответствующий методу фона getDepartment ()
[Httpget] public jsonResult getDepartment (int limit, int offset, string name, string des) {var lstres = deviretmodel.getdata (); if (! String.isnullorempty (name)) {lstres = lstres.where (x => x.name.contains (имя)). (! String.isnullorempty (des)) {lstres = lstres.where (x => x.des.contains (des)). tolist ();} lstres.foreach (x => {x.strcreatetime = x.createtime.tostring ("yyyy-mm-dd hh: mm: ss"); LSTRES.SKIP (OFFSET) .Take (Limit) .tolist (), Total = LSTRES.Count}; return json (ores, jsonrequestbehavior.allowget);}На этом этапе могут быть реализованы функции запроса и очистки страницы запроса.
У вас все еще есть вопрос: что, если нам нужно настроить события Bootstraptable? Нельзя передавать через ViewModel на заднем плане, верно?
Действительно, метод события JS не может быть передан с фона, поэтому нам нужно настроить метод обработки события в передней части, например, мы можем сделать это:
<script type = "text/javascript"> $ (function () {var data = @html.raw (newtonsoft.json.jsonconvert.serializeobject (model)); data.tableparams.onloadsuccess = function (data) {alert ("voverscess event"); document.getElementbyId ("div_index"));}); </script>2. Получите вторую редакцию ViewModel
Один из видовых моделей выше обрабатывает функции запроса и удаления, но добавление и редактирование также требует поддержки другого ViewModel. Давайте посмотрим на реализацию пакета редактирования.
1. Реализация ActionResult
Через кодовый запрос выше, мы можем знать, что когда пользователь нажимает на добавление и редактирование, будет запрошено другое представление →/Отдел/редактировать. Давайте посмотрим на реализацию View Edit
public actionResult edit (модель отделения) {var oresmodel = new {editModel = model, urls = new {upport = model.id == 0? "/Department/add": "/department/update"}}; return view (oresmodel);}Сообщение кода: приведенный выше код очень прост, который должен вернуть ViewModel на страницу просмотра, содержащую отредактированную сущность и отправленный URL. Независимо от того, существует ли этот основной ключ объекта, определяется тем, является ли текущий коммит новой сущностью или редактированием.
2. CSHTML -код
Edit.cshtml Code выглядит следующим образом:
<form id = "formedit"> <div rol = "document"> <div> <div> <button type = "button" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true"> × </span> </button> <h4 id = "mymodallabel"> для = "txt_departmentname"> name отдела </label> <input type = "text" name = "txt_departmentname" data-bind = "value: editmodel.name" waceholder = "Имя отдела"> </div> <div> <label for = "txt_departmentlevel"> department </label> <vintepring = "txteepart '> namepart namepart"> namepart namepart nameepart nameepartlevel ". data-bind="value:editModel.Level" placeholder="Department Level"></div><div><label for="txt_des">Description</label><input type="text" name="txt_des" data-bind="value:editModel.Des" placeholder="Descriptive"></div><div><button type="button" data-dismiss = "modal"> <span aria-hidden = "true"> </span> close </button> <button Type = "propect"> <span aria-hidden = "true"> </span> save </button> </div> </div> </form> <link href = "~/content/bootstrapvalidator/csss/booptrapvalidator. /> <script src = "~/content/bootstrapvalidator/js/bootstrapvalidator.js"> </script> <script src = "~/scripts/extensions/nockout.edit.js"> </script> <script type = "text/javascript"> $ () {var EditDa> <script = " @Html.raw (newtonsoft.json.jsonconvert.serializeobject (model)); ko.bindingeditviewmodel (editdata, {});}); </script>Код сомнение: Поскольку мы добавили компонент проверки Bootstrapvalidator, нам нужно ссылаться на соответствующие JS и CSS. Этот файл nockout.edit.js в основном инкапсулирует свойства и связывание событий страницы редактирования. Давайте посмотрим на код реализации этого JS.
3. Encapsulation
nockout.edit.js код:
(function ($) {ko.bindingedItViewModel = function (data, valyatorFields) {var, что = {}; arrrrectedData = ko.tojs (that.editmodel); $. ajax ({url: data.urls.submit, type: «post», contentType: 'Application/json', data: json.stringify (arrrrictedData), успех: функция (данные, статус) {alert (status);}}); $ ("#mymodal"). modal ("hide");}}; document.getElementbyId ("formedit"));};}) (jQuery);Код сомнение: это JS в основном инкапсулирует свойства модели редактирования и привязанную связь с представленным событием. Поскольку используется компонент проверки Bootstrapvalidator, требуется подчинение формы. На самом деле, идентификатор страницы не должен появляться на публике, например, «Formedit» и «Mymodal» выше. Это может быть передано как параметр, который должен быть оптимизирован. Параметр ValidatorFields представляет поле проверки компонента проверки. Если форма не требует проверки, можно пройти пустой JSON или нет. Мы не провели проверку поля в вышеуказанной статье. Фактически, вообще говоря, базовая таблица будет иметь одну или несколько непустых полей, такие как непустая проверка имен департаментов. Код на странице edit.cshtml изменяется на это:
<form id = "formedit"> <div rol = "document"> <div> <div> <button type = "button" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true"> × </span> </button> <h4 id = "mymodallabel"> anevers Имя </label> <input type = "text" name = "name" data-bind = "value: editmodel.name" wackholder = "name"> </div> <div> <label for = "txt_departmentlevel"> DepartmentLevel </label> <input type = "text" nele-never "data-bind =" value: editmodel.Lelel. Placeholder = "DepartyLevel"> </div> <div> <label for = "txt_des"> description </label> <input type = "text" name = "des" data-bind = "value: editmodel.des" placeholder = "des"> </div> <div> <button = "кнопка" data-dismiss = "modal" aria-hidden = "true"> </span> close </button> <button Type = "propect"> <span aria-hidden = "true"> </span> save </button> </div> </div> </form> <link href = "~/content/bootstrapvalidator/css/bootstrapvalidator.csss" rel = "relsheet"/> src = "~/content/bootstrapvalidator/js/bootstrapvalidator.js"> </script> <script src = "~/scripts/extensions/nockout.edit.js"> </script> <script type = "text/javascript"> $ (function () {var editdata = = @Html.raw (newtonsoft.json.jsonconvert.serializeobject (model)); ko.bindingeditviewmodel (editdata, {name: {validators: {notempty: {Сообщение: 'Имя не может быть пусто!'}}}});Затем он будет автоматически проверен при отправке:
ПРИМЕЧАНИЕ. Имя атрибута проверки соответствует атрибуту имени входного тега, поэтому для проверки этот атрибут этого имени должен быть установлен правильно.
Лучше всего подключить метод для добавления, удаления и модификации:
[Httppost] public jsonresult add (отдел odata) {departmodel.add (odata); return json (new {}, jsonrequestbehavior.allayget);} [httppost] public jsonresult update (департамент odata) {departmodel.update (odata); return json (nephodemodel.update (odata); Jsonrequestbehavior.allowget);} [httppost] public jsonresult delete (list <featural> odata) {departmodel.delete (odata); return json (new {}, jsonrequestbehavior.allayget);}На этом этапе эффект добавления, удаления, изменения и проверки всей страницы в порядке. Давайте кратко рассмотрим эффект:
3. Резюме
Вышеупомянутое просто инкапсулирует службу сложения, удаления, модификации и поиска Bootstraptable+KO, что является всего лишь основным пакетом. Если вам нужно применить их к вашему проекту, вам также могут потребоваться простые меры оптимизации, например:
1. Если это просто просмотр модели страницы, может ли лучше написать ее непосредственно на страницу представления, не возвращая ее из ActionResult в фоновом режиме, и это сохраняет проблему сериализации и передачи параметров. Это должно быть оптимизировано.
2. Идентификатор элемента страницы не должен появляться на публике JS. Элемент страницы может быть передан через параметры.
3. Добавьте и редактируйте методы событий, чтобы иметь много дублирования кода во всплывающем окне. Лучший способ сделать эту часть-это инкапсулировать всплывающее окно в отдельный компонент, чтобы вызвать его, что может уменьшить большую часть кода JS.
4. Если в условиях запроса и отредактированные свойства есть выбранные элементы раскрывающихся коробок, вам также может потребоваться инкапсулировать дат данных и другие атрибуты раскрывающейся коробки. Эта часть очень распространена. После того, как блоггер разобрался с демонстрацией, добавьте эту часть.
Выше приведено решение Bootstraptable + nockoutjs, представленное редактором для достижения добавления, удаления, модификации и поиска (3). Два вида модели завершили добавление, удаление, модификацию и поиск. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!