Prefácio: o blogueiro compartilhou alguns usos básicos de knockoutjs e inicializável antes. São todos aplicativos básicos e não são encapsulados. Eles apenas evitam o valor e a atribuição dos controles HTML e estão longe de mostrar o requintado da MVVM. Recentemente, o projeto planeja usar oficialmente o KO, por isso fez algumas embalagens para KO e Bootstraptable, e é compartilhado aqui para referência por amigos do parque. Para idéias de embalagem, consulte o mestre do parque do blog Xiao Qin. Se os amigos do parque tiverem uma maneira melhor, sinta -se à vontade para discutir.
Artigos da série Knockoutjs:
Bootstraptable e KnockoutJs se combinam para alcançar a função de adicionar, excluir, modificar e verificar [1]
Bootstraptable e KnockoutJs se combinam para alcançar a função de adicionar, excluir, modificar e verificar [2]
1. O primeiro viewmodel lida com a consulta
A implementação da demonstração ainda deve continuar a função de gerenciamento do departamento da última vez. A expansão a seguir explica pelo fluxo de dados.
1. O plano de fundo retorna a implementação do ViewModel para a visão
public ActionResult Index () {var modelo = new {TableParams = new {url = "/departamento/getDepartment", // Pagesize = 2,}, urls = new {delete = "/departamento/delete", edit = "/departamento/edit", add = "/edit/edit",}, Queyconds = " View (Model);}Dúvida de código: o modelo retornado aqui contém três opções
• TableParams: Parâmetros de inicialização da tabela de página. Como os parâmetros padrão são definidos em JS, os parâmetros definidos aqui são parâmetros de inicialização específicos da página.
• URLs: o caminho da URL que contém a solicitação de adição, exclusão e modificação.
• Querycondition: as condições de consulta da página.
2. Código de página cshtml
O código da página index.cshtml é o seguinte:
@{Layout = null;} <! Doctype html> <html> <head> <meta name = "viewport" content = "width = dispositivo-width"/> <title> Índice </title> <link href = "~/content/bootstrap/cs/bootstrap.minin.csss" Rel = "Styling =" Stylyshleshesh) href = "~/content/bootstrap-table/bootstrap-table.min.css" rel = "Stylesheet"/> <script src = "~/scripts/jQuery-1.9.1.minmin.js"> </script> <script src = "~/contentsp/js/boots/jns/boots/boots/boots/boots/jm/jm/jm/jm/jm/jm/jm/jM/ src = "~/content/bootstrap-table/bootstrap-table.min.js"> </script> <script src = "~/content/bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script> <script src = "~/scripts/knockout/knockut/knock.js/knock.js/knock.js/script <script> src="~/scripts/knockout/knockout-3.4.0.min.js"></script><script src="~/scripts/knockout/extensions/knockout.mapping-latest.js"></script><script src="~/scripts/extensions/knockout.index.js"></script><script src = "~/scripts/extensions/knockout.bootstraptable.js"> </script> <script type = "text/javascript"> $ (function () {var data = @html.raw (newtonsoft.json.jsonConvert.serieReLeObject (model); document.getElementById ("div_index"));}); </script> </ad Head> <body> <div id = "div_index" style = "preenchimento: 0px; overflow-x: hidden"> <div> <div> consulta Condições </div> <est> <form> iD = "formseck"> <> departamento "> <div> <div> <div> consulta Condições </div> <form> <form> Data-Bind = "Valor: Querycondition.name"> </div> <brety> Departamento Descrição </crety> <div> <input type = "text" data-bind = "valor: querycondition.des"> </div> <div style = "text-align: right;"> <butt = "" "Data-Bind =" Click: ClearClick = "ClearClick"> ClearClick ">"> type = "Button" Data-bind = "Clique: QueryClick"> Query </butut> </div> </morm> </div> </div> <div id id = "ToolBar"> <botão data-bind = "clique: addClick" type = "Button"> <span-hidden = "True"> </span> aria-hidden = "true"> </span> modificar </butut> <botão data-bind = "clique: deleteclick" type = "button"> <span Aria-hidden = "true"> </span> delete </botão> </divhckbox Data-bind = "bootstraptable: bootstraptable"> <tr> <h-checkBoxxbox = "bootstraptable: bootstraptable"> <tr> <h-checkbox = " Nome </th> <th data-field = "nível"> nível de departamento </th> <th datafield = "des"> descrição </th> <th datafield = "strCreateTime"> tempo de criação </th> </tr> </thead> </tabela> </div> </body </html>Dúvida de código: como o artigo anterior, você precisa citar jQuery, bootstrap, bootstraptable, nocaute e outros arquivos relacionados. Aqui estão os dois documentos a seguir:
• knockout.index.js: encapsula as propriedades e as ligações de eventos relacionadas à página de consulta.
• knockout.bootstraptable.js: encapsula a inicialização de bootstraptable e personaliza os métodos de ligação knockout.
Todas as interações da página acima são encapsuladas em JS público, portanto, não há necessidade de escrever um grande número de códigos duplicados, como elementos DOM, para obter atribuições, ligação a eventos etc. na página. Existem apenas as duas frases acima de JS escritas nesta página. Não é muito fácil?
3. Encapsulamento JS
Vamos dar uma olhada nos dois arquivos JS mencionados acima, knockout.bootstable.js e knockout.index.js.
(1) knockout.bootstraptable.js
(function ($) {// Adicione um método bootstraptableViewModel ao ko.bootstraptableViewModel = function (options) {var th This = this; this.Default = {ToolBar: '#ToolBar', // que container para o botão de ferramenta queryparams: function (param) {return {limite: (*) pagination: true, //Does pagination display (*) sidePagination: "server", //Pagination method: client client pagination, server server pagination (*) pageNumber: 1, //Initialize the first page to load, the default first page pageSize: 10, //The number of rows recorded per page (*) pageList: [10, 25, 50, 100], //The number of rows per page to be selected (*) method: 'Get', Pesquise: true, // a pesquisa de tabela é exibida? // O clique para selecionar linhas pode ser exibido ShowToggle: true,}; this.params = $ .extend ({}, this.default, opções || {}); // obtenha o registro selecionado thisfetSelections = function () {var Arrres = that.BootSraptable ("getSelection) Return ARRRRES; {that.bootstraptable ("refresh");};}; // Adicione ko encadernação personalizada ko.bindinghandlers.bootstraptable = {init: function (elemento, valueacCessor, allBindingsAccessor, viewModel) {// o oparam aqui é o limite de viewModELVARNVar $ (elemento) .BootStraptable (oviewmodel.params); // Adicione um método inicializável ao viewmodel oviewmodel.bootstraptable = function () {return $ ele.bootstraptable.Apply ($ ele, argumentos);}}, atualização: função (elemento, valueaCL. {}};}) (jQuery);Dúvida de código: o código acima faz principalmente duas coisas
1. ViewModel personalizado é inicializado pela Bootstraptable.
2.
Adicione as ligações personalizadas do KO.
Se os amigos do parque não entenderem o uso da encadernação personalizada, você poderá conferir as duas primeiras postagens do blog do blogger (uma) e (duas) para obter uma introdução detalhada.
(2) knockout.index.js
(function ($) {ko.bindingViewModel = function (dados, bindElement) {var self = this; this.Querycondition = ko.mapping.fromjs (data.Querycondition); this.DefaultQueryCarams = {queryparams: function (param) {vars = self.SeryerySeryCerams = {queryparams: function (param) {vars = self.SeryeryeryerySerys = {queryparams: function (param) {vars = selfs = param.offset; retorna params;}}; var tableParams = $ .extend ({}, this.DefaultQueryParams, data.tableParams || {}); talt.bootstraptable = new Ko.BootStableViewModEl (TABLEPARMS); {// Limpe se (typeof (value) == "function") {this (''); id = "myModal" tabindex = "-1" role = "diálogo" aria-labelledby = "mymodallabel"> </div> '); dialog.load (data.urls.edit, null, function () {}); $ ("body"). Append (Dialog); Dialog.modal (). Ao fechar a caixa pop-up (este claro inclui limpar a ligação e limpar o evento de registro) ko.cleannode (document.getElementById ("formedit")); dialog.remove (); self.bootstraptable.refresh ();});}; // Evento edit this.editclick = funcionar (varr. self.bootstraptable.getSelections (); if (arrectectedData.length <= 0 || arrectedData.length> 1) {alert ("Somente edite uma linha de cada vez"); return;} var = $ ('<div id = "mymodal" TABINDINDEX = "-1" Role = "Dialog" " ARIA-LABELLEDBY = "myModallabel"> </div> '); dialog.load (data.urls.edit, arrectectedData [0], function () {}); $ ("Body"). vinculação e limpeza do evento de registro) ko.cleanNode (document.getElementById ("formedit")); dialog.remove (); self.bootstraptable.Refresh ();});}; // excluir evento this.deleTeClick = function () {varrRrrReectedData =.BootSpts; (! ArrrectedData || ArrrectedData.Length <= 0) {alert ("Selecione pelo menos uma linha"); return;} $. Ajax ({url: data.urls.delete, tipo: "post", contentType: 'Application/json', data: json.stringify (ArrrctectedData), SUCESCESTO), SUCESTTA), SUCESTTE), SUBSTODO), SUBSTUÇÃO DATA: JSON.STRINGIFY (ARRRECTA), SUCESTTA), SUCESTTA), SUCTUMENTE), DATA (DATRRRECTA), DATA (APPLICA). {alert (status); self.bootstraptable.Refresh ();}});}; ko.ApplyBindings (self, bindElement);};}) (jQuery);Código Dúvida: Este JS encapsula principalmente os atributos e a ligação de eventos dos elementos da página, e vários lugares que precisam ser explicados
• this.QueryCondition = ko.mapping.fromjs (data.QueryCondition): O objetivo desta frase é converter as condições de consulta passadas do plano de fundo dos dados JSON para os atributos de monitoramento. Somente executando essa frase pode atributos e os elementos da página serão monitorados em ambas as direções.
• self.bootstraptable.Refresh (): O significado desta frase é atualizar os dados da tabela. Na verdade, é o método de atualização de inicialização chamado, mas o blogueiro simplesmente o encapsula no arquivo knockout.bootstraptable.js.
• dialog.load (data.urls.edit, null, function () {}): Ao adicionar e editar, o método load () do jQuery é usado. A função deste método é solicitar os elementos da página deste URL e executar o código JS da página correspondente do URL. Este método é muito poderoso em referir -se dinamicamente ao arquivo JS e executar o código dentro do arquivo JS.
Finalmente, anexe o código correspondente ao método GetDepartment () em segundo plano
[Httpget] public jsonResult getDepartment (int limite, Int Offset, nome da string, string des) {var lstres = departmentModel.getData (); if (! String.isnullorEmpty (name)) {lstres = lstres.where (x => x.name.contains (nome). (! string.isnullorEmpty (des)) {lStes = lstres.where (x => x.des.contains (des)). tolist ();} lstres.foreach (x => {x.strcreateTime = x.createTime.toString ("yyyy-mm-dd hh: LSTES.SKIP (deslocamento) .Take (limite) .Tolist (), Total = LSTES.Count}; retorna JSON (Ores, JsonRequestBeHavior.allowget);}Neste ponto, as funções de consulta e compensação da página de consulta podem ser realizadas.
Você ainda tem uma pergunta: e se precisarmos personalizar os eventos do Bootstraptable? Não pode ser transmitido através do ViewModel em segundo plano, certo?
De fato, o método do evento JS não pode ser passado do fundo, por isso precisamos personalizar o método de processamento do evento no front -end, por exemplo, podemos fazer isso:
<script type = "text/javascript"> $ (function () {var data = @html.raw (newtonsoft.json.jsonConvert.SerializeObject (Model)); Data.TableParams.onloadSuccess = function (Data) {Alert ("LoadsucCess Event");}; document.getElementById ("div_index"));}); </script>2. Obtenha o segundo viewmodel Edit
Um dos modelos ViewModels acima lida com as funções de consulta e exclusão, mas a adição e a edição também requer o suporte de outro viewmodel. Vamos dar uma olhada na implementação do pacote de edição.
1. Implementação do ActionResult
Através da consulta de código acima, podemos saber que, quando o usuário clicar em Adicionar e Editar, outra exibição será solicitada →/Departamento/Editar. Vamos dar uma olhada na implementação da visualização de edição
public ActionResult Edit (Modelo de departamento) {var oresmodel = new {editModel = Model, URLS = new {submit = Model.id == 0? "/Departamento/add": "departament/update"}}; retornar visualização (oresmodel);}Dúvida do código: o código acima é muito simples, que é retornar um viewmodel à página de visualização, contendo a entidade editada e o URL enviado. Se essa entidade a chave primária existe é determinada se a confirmação atual é uma nova entidade ou uma entidade de edição.
2. Código CSHTML
O código Edit.cshtml é o seguinte:
<form id = "formedit"> <div role = "document"> <div> <div> <button type = "button" data-dismiss = "modal" aria-label = "Close"> <span ARIA-Hidden = "true"> × </span> </button> <H4 Id = "mymodallabel"> Operação </h4> </hung> </button> <H4 ID = " Nome </Label> <input type = "text" name = "txt_departmentname" data-bind = "valor: editmodel.name" stailholder = "Nome do departamento"> </div> <div> <gravador para = "txt_departtlevel"> nível de departamento </label> <input Type = "text" name = "txt_d1 PISCONDADOR = "Nível do departamento"> </div> <div> <gravador para = "txt_des"> description </elated> <input type = "text" name = "txt_des" data-bind = "value: editModel.des" someholder = "descritivo"> </div> <div> <butão = "Buttão" "" DATAISMONTO = "Descritivo"> </div> <div> <butão = "Buttão" "" aria-hidden = "true"> </span> feche </butut> <botão type = "submit"> <span Aria-hidden = "true"> </span> Salvar </butut> </div> </div> </form> <link href = "~/contentpvalid"/css/bootstrapValidator.csSsSsSsSsSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS " src = "~/Content/bootstrapValidator/js/bootstrapValidator.js"> </script> <script src = "~/scripts/extensions/knockout.edit.js"> </sCript> <script type = "text/javascript"> $ (function () {var edddd> @Html.raw (newtonsoft.json.jsonConvert.SerializeObject (Model)); ko.bindingeditViewModel (editData, {});Dúvida do código: Como adicionamos o componente de verificação BootstrapValidator, precisamos fazer referência aos JS e CSS relevantes. Este arquivo knockout.edit.js encapsula principalmente as propriedades e a ligação de eventos da página de edição. Vamos dar uma olhada no código de implementação deste JS.
3. Encapsulamento JS
Knockout.edit.js Código:
(function ($) {ko.bindingeditViewModel = function (dados, validatorfields) {var that = {}; that.editModel = ko.mapping.fromjs (data.editModel); that.default = {message: 'verificação falhou', fields: {},, {}, Subster); ArrrectectedData = ko.tojs (that.editmodel); $. Ajax ({url: data.urls.submit, type: "post", contentType: 'Application/json', dados: json.stringify (ArrrectectData), sucesso: função (dados, status) {alert (status);}}); $ ("#mymodal"). modal ("hide");}}; document.getElementById ("formedit"));};}) (jQuery);Dúvida do código: este JS encapsula principalmente as propriedades do modelo de edição e a ligação do evento enviado. Como o componente de verificação do BootstrapValidator é usado, é necessário o envio do formulário. De fato, o ID da página não deve aparecer em JS público, como "formedit" e "mymodal" acima. Isso pode ser passado como um parâmetro, que precisa ser otimizado. O parâmetro validatorfields representa o campo de verificação do componente de verificação. Se o formulário não exigir verificação, não há problema em passar por um JSON vazio ou não. Não fizemos verificação de campo no artigo acima. De fato, de um modo geral, a tabela básica terá um ou vários campos não vazios, como a verificação não vazia dos nomes do departamento. O código na página Edit.cshtml é alterado para isso:
<form id = "formedit"> <div role = "document"> <div> <div> <button type = "button" data-dismiss = "modal" aria-label = "Close"> <span ARIA-Hidden = "true"> × </span> </button> <H4 id = "mymodallabel"> Operação </h4> Nome </Label> <input type = "text" name = "name" data-bind = "valor: editmodel.name" someholder = "nome do departamento"> </div> <div> <etiqueta para = "txt_departmentlevel"> departamentoLEvel </bel> <input type = "texth" name = "" "data-bind =" placeholder="Departmentlevel"></div><div><label for="txt_des">Description</label><input type="text" name="Des" data-bind="value:editModel.Des" placeholder="Des"></div><div><button type="button" data-dismiss="modal"><span aria-hidden="true"></span>Close</button><button type = "submit"> <span Aria-hidden = "true"> </span> Salvar </butut> </div> </div> </form> <link href = "~/content/bootstrapValidator/css/bootstrapValidator.css" rel = "Stylesheet"/> <cript src = "~/Content/bootstrapValidator/js/bootstrapValidator.js"> </script> <script src = "~/scripts/extensions/knockout.edit.js"> </sCript> <script type = "text/javascript"> $ (function () {var edddd> @Html.raw (newtonsoft.json.jsonConvert.SerializeObject (Model)); Ko.BindingEditViewModel (editData, {Nome: {Validadores: {NÃO EMPRESSIONANTE: {Mensagem: 'O nome não pode estar vazio!'}}}});Em seguida, será verificado automaticamente ao enviar:
NOTA: O nome do atributo de verificação corresponde ao atributo de nome da tag de entrada; portanto, para fazer a verificação, esse atributo de nome deve ser definido corretamente.
É melhor anexar um método de fundo para adicionar, excluir e modificar:
[Httppost] public jsonResult add (departamento odata) {departmentModel.add (odata); retorna json (new {}, jsonRequestBehavior.allowget);} [httppot] public jsonResult update (departamento jata) {departamentmodel.update (httppost] JsonRequestBeHavior.Allowget);} [httppost] public JSONRESULT DELETE (LISTE <PARECTION> ODATA) {departamentoModel.Delete (ODATA); Return json (novo {}, jsonRequestBehavior.allowget);}Nesse ponto, o efeito de adicionar, excluir, modificar e verificar a página inteira está ok. Vamos dar uma olhada no efeito brevemente:
3. Resumo
O acima exposto encapsula o serviço de adição, exclusão, modificação e pesquisa do Bootstraptable+KO, que é apenas um pacote primário. Se você precisar aplicá -los ao seu projeto, também pode precisar de algumas medidas de otimização simples, como:
1. Se for simplesmente um viewModel de uma página, pode ser melhor escrevê -lo diretamente na página de exibição sem devolvê -la do ActionResult em segundo plano e salva o problema da serialização e da passagem de parâmetros. Isso precisa ser otimizado.
2. O ID do elemento da página não deve aparecer em JS público. O elemento da página pode ser passado através de parâmetros.
3. Adicione e edite os métodos de eventos para ter muitos códigos duplicados na caixa pop-up. A melhor maneira de fazer essa parte é encapsular a caixa pop-up em um componente separado para chamá-lo, o que pode reduzir a maior parte do código JS.
4. Se houver elementos selecionados da caixa suspensa nas condições de consulta e propriedades editadas, também pode ser necessário encapsular o DataSource e outros atributos da caixa suspensa. Esta parte é muito comum. Depois que o blogueiro resolveu a demonstração, adicione esta peça.
O acima é a solução para o Bootstraptable + KnockoutJs introduzido pelo editor para obter a adição, exclusão, modificação e pesquisa (3) Os dois modelos do ViewModels concluíram a adição, exclusão, modificação e pesquisa. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!