No artigo anterior, apresentei a você a combinação de bootstraptable e knockoutjs para implementar as funções de adição, exclusão, modificação e pesquisa [1] e introduzi alguns usos básicos do Knockout.js. Em seguida, continuaremos a apresentá -lo a você através deste artigo. Se você planeja usar o KO para fazer projetos, vamos dar uma olhada!
O Bootstrap é uma estrutura front-end, uma coisa boa para liberar desenvolvedores da Web. Isso mostra que a interface do usuário é muito sofisticada, atmosférica e sofisticada. Em teoria, você não precisa escrever uma linha de CSS. Basta adicionar os atributos apropriados à tag.
Knockoutjs é uma estrutura MVVM implementada por JavaScript. Muito bom. Por exemplo, depois de adicionar ou diminuir os itens de dados da lista, não há necessidade de atualizar todo o fragmento de controle ou escrever nós de adição e exclusão de JS por você mesmo. Basta definir o modelo e os atributos que atendem às suas definições de sintaxe. Simplificando, precisamos apenas prestar atenção ao acesso aos dados.
1. Visualização do efeito
De fato, isso não tem efeito. É apenas uma adição, exclusão, modificação e pesquisa simples. A chave ainda está no código. O uso do KO pode salvar muitas operações de ligação de dados da interface DOM. Abaixo está o código JS para toda a lógica de adicionar, excluir, modificar e pesquisar:
Efeito da página:
2. Exemplos de código
Ok, vamos ao ponto! O blogueiro planeja apresentá -lo em duas partes. A primeira parte é a parte de inicialização da tabela e a segunda parte é a parte da adição de operação, exclusão e modificação da operação do botão.
1. Inicialização da tabela
1.1. Preparação
Primeiro veja os arquivos JS e CSS que precisam ser referenciados
<link href = "~/Content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-table/bootstrap-table.min.css" rel = "Stylesheet"/> <cript src = "~/scripts/jQuery-1.9.1.min.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "~/content/bootstrap-table/bootstrap-table> src = "~/content/bootstrap-table/loce/bootstrap-table-zh-cn.js"> </script> <script src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script> <script src = "~ scripts/sclickoutsOut/extensões/knockoutoutoutsOut/extensões src = "~/content/bootstrap-table/knockout.bootstraptable.js"> </script> <script src = "~/scripts/department.js"> </sCript>
Todos são arquivos CSS e JS comumente usados. Temos principalmente dois arquivos JS personalizados: knockout.bootstraptable.js e department.js. No artigo anterior, introduzimos que o uso do KO pode personalizar nossa ligação de dados. Da mesma forma, para a ligação da tabela, também definimos uma ligação personalizada, código dentro de knockout.bootstraptable.js.
// Adicione KO encadernação personalizada ko.bindinghandlers.mybootstraptable = {init: function (elemento, valueAccessor, allbindingsacsessor, viewmodel) {// O oparam aqui é o viewModelVar OviewModel = valueaccessor (); $ (elemento) .BootStraptable (oviewModel.params); // Adicione o método bootstraptável ao viewModel oviewmodel.bootstraptable = function () {return $ ele.bootstraptable.apply ($ ele, argumentos); (function ($) {// Adicione um método bootstraptableViewModel ao ko.bootstraptableViewModel = function (options) {var thats = this; this.Default = {search: true, // se é realidade, é verdade, que é realidade, é verdade, que é realidade, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que é verdadeiro, é verdade, que não é necessário que seja realidade: Cache: Falso, ShowRefresh: true, // O botão de atualização é exibido MinimumumCountColumns: 2, // O número mínimo de colunas permitidas clicktoselect: true, // onde ativar o clique em Selecionar linha ShowTog: True,}; {var ArrRres = that.bootstraptable ("getSelections") retorna arrres;}; // atualizar this.Refresh = function () {that.bootstraptable ("refresh");};};}) (jQuery);Código Dúvida: Este arquivo JS faz principalmente duas coisas
1. Personalize a propriedade de ligação de dados MyBootStraptable. Para o método de atualização em ko.bindinghandlers.mybootstraptable, não é necessário defini -lo.
2. Encapsular o inicializável adicionando um bootstraptableViewModel ao objeto KO.
1.2. Iniciar a ligação da tag html
<tabela id = "tb_dept" data-bind = "myBootStraptable: $ root"> <tr> <th data-checkbox = "true"> </th> <th data-field = "name"> nome do departamento </th> <th datafield = "nível"> nível de departamento </data-field = "des"> Hora </th> </tr> </seaad> </tabela>
Dúvida do código: defina uma tag de tabela e use a ligação personalizada ao MyBootStraptable. Conforme mencionado no artigo anterior, $ root pode ser entendido como o significado da inicialização. Para simplificar, todas as colunas são escritas diretamente em <th>.
1.3. Ative a ligação de KO
Após a carga da página, inicie a ligação de Ko:
// inicialize $ (function () {// 1, init tabela TableInit.init (); // 2, registre o complemento, exclusão e modificação Event Operating.operateInit ();}); // inicialize tabela var tableinit = {init: function () {// binding viewMapthis.myviewMewel = {init: function () {// binding viewMapthis.myviewMewel = {init: ko.) '/Departamento/getDepartment', // Solicite Url (*) Método: 'Get', // Método de solicitação (*) Barra de ferramentas: '#ToolBar', // que contêiner é usado para o botão Ferramenta QueryParams: function (param) {return {limite: param.limit, Offset: param.offset};}, // paginação "Servidor", // Método da paginação: Paginação do cliente, o servidor de servidor Paginação (*) Pagenumber: 1, // Inicialize a primeira página para carregar, padrão de primeira página PageSize: 10, // Número de linhas de registro por página (*) Pagelist: [10, 25, 50, 100], // Número de linhas por página a selecionar (*)}); document.getElementById ("tb_dept"));}};Dúvida do código: Depois que a página for carregada, ligue para o objeto BootstraptableViewModel encapsulado acima para mesclar os parâmetros passados e, finalmente, ativar a ligação e ativá -lo. O código de depuração mostra que quando o ko.applybindings (this.myviewModel, document.getElementById ("tb_dept")); é executado; A ligação personalizada entrará em vigor e o programa entrará no método init do objeto Ko.BindingHandlers.MyBootStraptable para inicializar o Bootstraptable. Aqui está um ponto a ser explicado:
init: function (elemento, valueAccessor, allBindingsAccessor, viewModel) {// O oparam aqui está o viewModelvar oviewModel = valueAccessor (); var $ ele = $ (elemento) .BootSraptable (uiewmodel.params); {return $ ele.bootstraptable.apply ($ ele, argumentos);}}No método init acima, através do segundo parâmetro ValueAccessor, obtemos o ViewModel atualmente ligado, que é o objeto deste.MyViewModel acima. O blogueiro acha que isso é propício à sua compreensão da lógica da ligação personalizada. Basicamente, quando executamos esta frase var $ ele = $ (elemento) .BootStraptable (oviewModel.params);, a inicialização da nossa tabela é concluída. O blogueiro define uma coleção para o método correspondente em segundo plano. Por uma questão de completude, vou postar aqui:
DepartamentoController
2. Operação do botão
O exposto acima é usar nossa ligação de dados personalizada através da inicialização do Bootstraptable. Vamos experimentar os "Shuangweiwai" usando atributos de monitoramento usando a operação do botão abaixo.
2.1. Exibir página
Primeiro, defina nosso botão de adição na página de adição na página de exibição
<div id = "ToolBar"> <botão id = "btn_add" type = "button"> <span ARIA-Hidden = "true"> </span> adicione </botão> <button id = "btn_edit" type = "buttão"> <span aria-hidden = "true"> </span> "Modify" </button> <butão "> <span-cled =" true "> </span>" ARIA-HIDDEN = "TRUE"> </span> Excluir </botão> </div>
Para simplificar, o blogueiro usou uma caixa pop-up oculta para conter caixas de texto recém-adicionadas e editadas. Obviamente, de um modo geral, você pode usar visualizações parciais aqui, e pode haver uma edit.cshtml em seu projeto, mas aqui o blogueiro as coloca em uma página porque esse não é o foco do texto.
<div id = "mymodal" tabindex = "-1" role = "diálogo" aria-labelledby = "mymodallabel"> <div role = "document"> <div> <div> <butter type = "button" data-dismiss = "modal" aria-label = "close"> <span-hidden = "True"> × id = "mymodallabel"> operação </h4> </div> <div> <gravador para = "txt_departmentname"> nome do departamento </elatbul> <input type = "text" name = "txt_departmentname" departamento "departamento" "name" od = "txt_departmentName" Placender "". para = "txt_departmentLEvel"> nível de departamento </abely> <input type = "text" name = "txt_departmentLevel" data-bind = "valor: nível" id = "txt_departmentLevel" staneholder = "departamentoLEvel"> </Div> <bel> <bel = "txt_des"> description </) Data-bind = "Valor: des" id = "txt_des" placeholder = "description"> </div> </div> <div> <botão tipo = "Button" Data-Dismiss = "Modal"> <span ARIA-HENDEN = "TRUE"> </span> Fechar </Button> <butão "" Id "Id" "Btn_subMit" Data-Data-Data-Data-Dism (/Button> ARIA-HENDEN = "true"> </span> Salvar </botão> </div> </div> </div>
2.2. Operação do botão de inicialização do JS
// operação var operação = {// Evento do botão inicialize OperateInit: function () {this.operAtAtDd (); this.operateUpdate (); this.operatedElete (); this.DepartmentModel = {id: ko.observable (), name: ko.obServable (), nível: ko.ob.obsertable (), name: ko.ObSons: ko.observable ()};}, // Adicionar operação: function () {$ ('#btn_add'). ko.observable (), nível: ko.observable (), des: ko.observable (), createTime: ko.observable ()}; ko.utils.extend (opera.DepartmentModel, OEMPMYMODEL); document.getElementById ("mymodal")); operatE.operatesave ();}). on ('hidden.bs.modal', function () {ko.cleanNode (document.getElementById ("mymodal"));});});});}); {$ ('#btn_edit'). on ("clique", function () {$ ("#mymodal"). modal (). de dados para ViewModelko.utils.extend (operate.DepartmentModel, ko.mapping.fromjs (arrrrectedData [0])); {// Limpe a ligação ao fechar a caixa pop-up (isso inclui limpar a ligação e limpar o evento de registro) ko.cleanNode (document.getElementById ("mymodal"));});}); {});});});}, // delete: () (); arrrectectedData = tableinit.myviewModel.getSelections (); $. Ajax ({url: "/departamento/delete", tipo: "post", contentType: 'Application/json', dados: json.stringify (ArrrectectData), sucesso: função (dados, status) {alert (status); // tableinit.myviewModel.Refresh ();}});});});}, // salvar dados opereve: function () {$ ('#BTN_SubMit'). ViewModel to Data ModelVar Odatamodel = Ko.tojs (oviewModel); var funcname = odatamodel.id?"UPDATE":"add";$.ajax( {url: "departamento/"+funcname, tipo: "post", dados: odatamodel, sucessão: STATUTO) {alert (status); tableInit.myviewModel.Refresh ();}});});});}, // Verificação de dados Operatecheck: function (arr) {if (arr.Length <= 0) {alert ("Selecione pelo menos uma linha de dados"); retorn; false;} retornar true;}}Ceticismo de código: conte -nos sobre a lógica de execução aqui. Primeiro, ligue para operador.operateInit (); no método $ (function () {}). No método operatorinit (), registre o evento de clique no botão na página e também defina isso.DepartmentModel como o recém -editado ViewModel. Este viewModel define os atributos de monitoramento correspondentes aos elementos da página. Você ainda se lembra de alguns dados de dados na caixa pop-up escondida acima? Sim, o valor do valor correspondente corresponde aos atributos de monitoramento aqui. Após definir a ligação, todas as alterações de monitoramento no JS que levam a isso.DepartmentModel acionarão o valor das tags de ligação na interface para alterar. Pelo contrário, a alteração no valor do valor de todas as tags na interface inevitavelmente causará a alteração em seus valores de atributo de monitoramento. Esta é a chamada ligação de mão dupla. Vamos dar uma olhada na execução da ligação bidirecional em detalhes.
2.3. Novas operações
$ ('#btn_add'). on ("clique", function () {$ ("#mymodal"). modal (). ko.observable ()}; ko.utils.extend (operate.DepartmentModel, OEmptyModel); Ko.ApplyBindings (operate.DepartmentModel, document.getElementById ("mymodal")); operate.operatesave ();}). {ko.cleanNode (document.getElementById ("mymodal"));});});Quando nossa interface aciona uma nova operação, a caixa modal oculta mencionada acima será exibida primeiro. Quando a caixa modal for exibida, primeiro defina um viewModel vazio e depois ligue para ko.utils.extend (operate.DepartmentModel, OEmptyModel); Esta frase substituirá a operação global. A função do método ko.utils.extend () é semelhante à função de $ .extend () em jQuery. Ambos os objetos anteriores são mesclados com base nos objetos subsequentes e, após a mesclagem, a ligação é ativada usando o novo ViewModel. Depois de ativar a ligação, registre o evento de clique no botão Salvar. Ao adicionar isso, uma caixa modal aparece. Como os atributos de monitoramento no ViewModel estão todos vazios, o valor do elemento de interface correspondente também será limpo, por isso vemos isso na nova adição:
Quando a caixa pop-up é fechada, executamos o ko.cleanNode (document.getElementById ("myModal")); através do evento fechado. Essa frase é muito importante porque, para o mesmo DOM, o KO só pode ser vinculado uma vez. Se você precisar se vincular novamente, precisará limpar a ligação primeiro. Além disso, o método CleanNode () não apenas limpará a ligação, mas também limpa os eventos registrados no DOM. Você precisa prestar atenção ao usá -lo!
2.4. Operações de edição
$ ('#btn_edit'). on ("clique", function () {$ ("#myModal"). modal (). com o modelo de dados para viewModelko.utils.extend (operate.departmentModel, ko.mapping.fromjs (arrriedData [0])); {// Limpe a ligação ao fechar a caixa pop-up (este claro inclui limpar a ligação e limpar o evento de registro) ko.cleanNode (document.getElementById ("mymodal"));});});}) ;;Quando acionamos a operação de edição, a interface ainda aparece. No evento pop-up da caixa pop-up, pegamos a linha atualmente selecionada e verificamos se uma linha está selecionada. É melhor converter objetos JSON ordinários em ViewModel com atributos de monitoramento através da frase ko.mapping.fromjs (ArrrectectedData [0]). Conforme mencionado no artigo anterior, esse método requer o suporte do arquivo JS Knockout.Mapping-Latest.js. Após a conversão, o ViewModel ainda é atualizado através do método ko.utils.extend () e ativar a ligação. Como o ViewModel é atualizado pelos dados da linha atualmente selecionada, o resultado é:
2.5. Salvar operação
Depois de adicionar e editar caixas pop-up, clique em Salvar após modificar as informações relevantes e o evento salvar será acionado.
$ ('#btn_subMit'). on ("clique", function () {// busca o viewModelvar oviewModel = operation.DepartmentModel; // converte o viewModel em dados modelvar odatamodel = ko.tojs (OVIEWMODEL); odatamodel.id ?"UPDATE":"add";$.ajax( {url: "/departamento/"+funcname, tipo: "post", dados: odatamodel, sucesso: function (dados, status) {alert (status); tableinit.myviewModel.Refresh ();}}););Quando o evento Salvar é acionado, primeiro o ViewModel ligado à página, ou seja, o Operating.DepartmentModel e, em seguida, usamos o método ko.tojs () para converter o ViewModel com atributos de monitoramento em um objeto JSON com dados puros. Este método é interno para o KO e não requer outro suporte de JS. Depois de obter o objeto JSON, envie uma solicitação AJAX para adicionar ou editar dados. Isso reflete bem a ligação de mão dupla. Após o valor de todas as caixas de texto nas mudanças na interface, a alteração da operação.DepartmentModel também será acionada.
2.6. Excluir operação
Não há nada a dizer sobre a operação de exclusão e não tem nada a ver com KO.
3. Resumo
O acima introduz o uso conjunto de KO e o Bootstraptable através de uma operação simples de adição, exclusão, modificação e pesquisa. O KO pode libertá -lo do DOM e se concentrar no ViewModel. Olhando para todo o código JS, você dificilmente pode ver o JQuery's Val (), o texto () e outras operações para obter e atribuir valores à interface DOM. Parece limpo e refrescante e sofisticado? Obviamente, isso pode ser apenas alguns dos usos mais básicos do KO. Afinal, os blogueiros só aprendem KO há 3 dias, e os usos mais avançados precisam ser explorados. Quando você se acostuma em um tempo, compartilhará alguns de seus usos avançados com todos. Se você acha que este artigo pode ajudá -lo a entender o princípio do KO e seu uso, você também pode recomendá -lo. O editor é grato por isso aqui!
O exposto acima é o conteúdo inteiro da combinação de bootstraptable e knockoutjs para implementar a função de adição, exclusão, modificação e pesquisa [2]. Espero que seja útil para todos!