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. Introdução ao knockout.js
1. Knockout.js e MVVM
Atualmente, várias estruturas de front-end são esmagadoras e deslumbrantes. Às vezes, tenho que suspirar que, como programador, é realmente difícil, sempre há técnicas infinitas para aprender. Quando vai terminar, a menos que você se transforme! O mar do sofrimento é ilimitado, e se é a costa quando você olha para trás, depende de você!
Knockout.js é uma estrutura de front-end leve com base no modo MVVM. Como é a luz? De acordo com a versão mais recente v3.4.0 exibida no site oficial, é apenas 22kb. Ele pode lidar com a ligação entre o modelo de dados e a interface DOM de maneira amigável. O mais importante é que sua ligação é bidirecional. Ou seja, se o modelo de dados mudar, os dados na interface DOM também mudarão de acordo. Por outro lado, se os dados da interface DOM mudarem, o modelo de dados também mudará de acordo. Isso pode reduzir bastante a quantidade de nosso código front-end e facilitar a manutenção de nossa interface, e não precisamos mais escrever muitos modelos de dados de monitoramento de eventos e alterações interface DOM. O blogueiro ilustrará esses dois pontos com base em um exemplo de uso abaixo.
Site oficial Knockout.js: http://knockoutjs.com
Knockout.js Endereço de código aberto: https://github.com/knockout/knockout
Modo MVVM: Este é um modelo de design para criar interfaces de usuário. O MVVM divide -o em três peças, nomeadamente modelo, visualização e viewModel, o modelo é o modelo de dados, a visualização é a nossa visualização e o ViewModel é um modelo de exibição, usado para vincular o modelo de dados e os elementos DOM na visualização. Se você usou WPF e Silverlight, entender isso não deve ser um problema; Não é um problema não tê -lo usado. Depois de ler este artigo, você terá um entendimento geral.
2. O exemplo mais simples
De um modo geral, se você usar o Knockout.js do zero, precisará fazer pelo menos as quatro partes a seguir
2.1. Vá para o site oficial para baixar o arquivo knockout.js e, em seguida, cite -o na página de visualização.
<script src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script>
Nota: Knockout.js não requer suporte ao jQuery. Se o seu projeto exigir operações relacionadas ao jQuery, consulte o jQuery; Caso contrário, apenas faça referência aos arquivos acima.
2.2. Defina o ViewModel
O que é ViewModel? De fato, no JS, parece um objeto JSON. Definimos um viewmodel:
var myViewModel = {name: "lilei", profissão: "engenheiro de software",};2.3. Defina a tag que vincula a ligação de dados na visualização
<div> Nome: <Label Data-Bind = "Texto: Nome"> < /Label> <r /> Profissão: <input type = "text" data-bind = "textinput: profissão" /> </div>
NOTA: O texto é necessário para o texto correspondente às tags de entrada, enquanto o texto para texto para tags comuns é necessário.
2.4. Ative a ligação
Depois de fazer as três etapas acima, você também precisa ativar a ligação do nocaute
ko.ApplyBindings (myViewModel);
Ao fazer essas quatro partes, a ligação de dados do ViewModel mais simples é basicamente implementada. Obtenha o efeito:
Se você tiver cuidado o suficiente, descobrirá que o método ko.applybindings () possui dois parâmetros. O primeiro é o ViewModel que precisamos nos ligar e qual é o segundo? De Ko.ApplyBindings (myViewModel); Podemos ver que o segundo parâmetro é um parâmetro opcional, que representa o escopo da tag ligada ao ViewModel. Por exemplo, vamos alterar o código acima:
<div> Nome: <Label id = "lb_name" data-bind = "text: name"> < /label> <r /> Profissão: <input type = "text" data-bind = "textinput: profissão" /> </div> ko.applybindings (myViewModel, documentElementByid ("lb_name");Obtenha o resultado:
A partir disso, podemos ver que o segundo parâmetro define o escopo da ação do MyViewModel, ou seja, apenas a ligação ao rótulo de id = "lb_name" entrará em vigor. Se o segundo parâmetro for um rótulo de contêiner, como o DIV, significa que o escopo da ligação é todos sub-rabelas abaixo da div.
3. Atributos de monitoramento
A partir das quatro etapas acima, não podemos ver nenhum efeito. O que vemos nada mais é do que vincular os dados de um objeto JSON à tag HTML. Qual é o sentido de fazer isso? Não está complicando problemas simples? Não se preocupe, testemunhe o milagre imediatamente! Como mencionado acima, o significado mais importante do nocaute está na ligação bidirecional. Então, como alcançar nossa ligação de mão dupla? A resposta está monitorando atributos.
No knockout, existem três atributos de monitoramento no núcleo: observáveis, dependentObservables, ObservableArray. O significado da observação é traduzido como observação e observação. Se é inapropriado dizer que é um atributo de observação ou um atributo de observação, chamaremos isso de um atributo de monitoramento por enquanto.
3.1. Observáveis: Monitorando propriedades
Vamos mudar o exemplo acima para isso:
<head> <meta name = "viewport" content = "width = dispositivo-lar-de dispositivo"/> <title> index3 </title> <script src = "~/scripts/jQuery-1.9.1.min.js"> </script> <script src = "~/scripts/knockout/knockout-3.4.min.jj"> Data-Bind = "Texto: Nome"> </Label> <r/> Profissão: <input type = "text" data-bind = "textInput: Profession"/> </div> <div> <input type = "text" id = "txt_testobservable"/> </diviptips type = "text/javascript"> // 1.Define " Ko.observable ("lilei"), profissão: "engenheiro de software",}; // 2. Ative o Ko.ApplyBindings de ligação (myViewModel); $ (function () {// Registre o evento de textChange $ ("#txt_testobservable").O significado desta frase é adicionar a propriedade Nome do ViewModel a uma propriedade de monitoramento. A propriedade Name deve se tornar uma propriedade de monitoramento. Uma coisa mágica vai acontecer. Vamos dar uma olhada quando escrevemos MyViewModel.:
O nome mudou da propriedade original para um método, ou seja, uma vez que o ko.observable () for adicionado, a propriedade correspondente se tornará um método. Portanto, o valor e a atribuição do nome precisam ser tratados usando o myViewModel.Name (). Vamos dar uma olhada no efeito:
Dúvida do código: é óbvio que myViewModel.Name ($ (this) .Val ()); Esta frase atribui o valor da caixa de texto atual à propriedade Name. Como a interface liga a propriedade Name, o valor no rótulo também muda de acordo. Ou você diria que isso pode ser feito usando o evento TextChange. Enquanto o valor da caixa de texto atual for atribuído à tag de etiqueta, esse efeito pode ser alcançado, o que não é nada. De fato, seu método de escrita também pode atingir o objetivo, mas o significado do nosso atributo de monitoramento é que, quando o valor do nome é alterado em qualquer lugar, a interface mudará de acordo, sem atribuir valores às tags de etiquetas em todos os lugares. No JS, você só precisa se concentrar no myviewmodel.name (). Não é muito incrível ~~
3.2. DependentObservables: Monitore Propriedades de dependência
Se você leu os atributos de monitoramento acima, ainda não está satisfeito? Vamos dar uma olhada no uso de atributos de dependência de monitoramento.
Vamos mudar o código e dar uma olhada:
<head> <meta name = "viewport" content = "width = dispositivo-lar-device"/> <title> index3 </title> <script src = "~/scripts/jQuery-1.9.1.min.js" </script> <script src = "~/scripts/knockout/knockout-3.4.min.jj"> <input type = "text" data-bind = "textinput: name" /> <r /> Profissão: <input type = "text" data-bind = "textinput: profissão" /> <r /> /> descrição: <etiqueta data-bind = "text: des"> </elatel> </div> <script type = "text /javasscrind"> //110 ko.observable ("lili"), profissão: ko.observable ("engenheiro de software"),}; myviewmodel.des = ko.dependentObservable (function () {return "eu sou chamado -" + myViewModel.name () + ",, a ocupação -" + myViewM.Prontion. Ative o Ko.ApplyBindings de ligação (MyViewModel); </sCript> </body>Vamos dar uma olhada no efeito:
Dúvida do código: Ao adicionar o atributo de dependência de monitoramento ko.dependentObservable (), o valor do atributo DES pode ser monitorado ao mesmo tempo para as mudanças no nome e no professor. Se algum deles mudar, a etiqueta de des-ligada desencadeará a alteração. A maior vantagem disso é evitar o problema de operar o DOM pelo JS, o que é interessante.
3.3. ObserBableArray; monitorar matrizes
Além dos dois acima, o KO também suporta o monitoramento de objetos de matriz. Vamos dar uma olhada em um exemplo:
<Head> <meta name = "viewport" content = "width = dispositivo-largura"/> <title> index3 </title> <script src = "~/scripts/jQuery-1.9.1.min.js" </script> <script src = "~/scripts/knockout/knockout-3.4.min.jj"> Data-Bind = "Opções: DePtarr, OptionStExt: 'Name'"> </leclect> </div> <div> <input type = "text" id = "txt_testobservable"/> <input type = "button" id = "btn_test" value = "new Department"/> </div) 1, nome: 'R&D Departamento'}, {id: 2, nome: 'Departamento Administrativo'}, {id: 3, nome: 'Departamento de Assuntos Humanos'}]); var ViewModel = {DePTARR: DePTARR, (}; Ko.ApplyBindings (ViewModel); var i = 4; (FUNC)}; {DePtarr.push ({id: i ++, nome: $ ("#txt_testobservable"). val ()});});}); </script> </body>Confira o efeito:
Dúvida do código: o método acima ko.observableArray () adiciona monitoramento de objetos de matriz. Ou seja, em qualquer lugar do JS, desde que as alterações da matriz sejam feitas para o objeto DePTARR Array, a interface do usuário será acionada para dar o correspondente. Uma coisa a observar é que a matriz de monitoramento é na verdade o próprio objeto de matriz monitorado e não pode ser monitorado quanto a alterações nas propriedades do objeto filho no objeto da matriz. Por exemplo, alteramos o evento de clique para isso:
$ (function () {$ ("#btn_test").Efeito:
Isso mostra que o monitoramento da matriz realmente monitora o próprio objeto da matriz e não monitora as alterações nos atributos dos elementos na matriz. Se você realmente precisar monitorar as alterações da propriedade dos objetos nos dados, é necessário usar o ko.observable () para a propriedade de objetos nos dados e os dois são usados juntos. Se você estiver interessado, pode tentar.
4. Atributos comuns de dados de dados em KO
No exposto, usamos vários atributos de ligação de dados; portanto, quantos desses atributos de ligação de dados existem no nocaute? Aqui listamos algumas propriedades comumente usadas.
4.1. Texto e inputText
O texto, como o nome indica, significa texto. Esse atributo de ligação geralmente é usado para exibir texto com tags como <breting>, <pan>, <div>, etc. É claro que, se você quiser, essa ligação pode ser usada para qualquer tag. É basicamente nada a dizer sobre usá -lo. Se o ko.observable () não for usado, é uma ligação estática, caso contrário, é uma ligação dinâmica.
InputText, o texto da tag de entrada, é equivalente ao atributo de valor da tag de entrada.
<div> Nome: <Label Data-Bind = "Texto: Nome"> </elabel> <r/> Profissão: <input type = "text" data-bind = "textInput: Profession"/> </div> //1.define viewModelVar MyViewModel = {Nome: Ko.observable ("Lilei"), Profession: " Ative o Ko.ApplyBindings de ligação (myViewModel);4.2. Valor
Essa propriedade de ligação é geralmente usada para tags de entrada, que é basicamente semelhante ao InputText acima. Mas o valor é mais padronizado.
Também é usado com o valor um parâmetro valueUpdate, que indica qual operação a interface faz quando o valor é atualizado. Os principais valores do ValueUpdate incluem alteração/keyup/keypress/pós -keydown, etc. Indica o valor do viewmodel correspondente ao valor quando o texto muda, encolhimento do teclado, pressionamento do teclado, pressionamento do teclado, pressionamento do teclado, etc.
Nome: <input type = "text" data-bind = "valor: nome, valueUpdate: 'keyup'" /> <r /> var myViewModel = {nome: ko.observable ("lilei"),}; // 2. Ative o Ko.ApplyBindings de ligação (myViewModel);O código acima indica que o atributo de valor da caixa de texto e o atributo de nome do MyViewModel são atualizados quando o teclado é fechado.
4.3. Verificado
A ligação verificada é geralmente usada para caixa de seleção, rádio e outros elementos de formulário que podem ser selecionados, e seu valor correspondente é o tipo BOOL. O uso de valor é basicamente semelhante, então não vou repeti -lo.
4.4. habilitar
A ligação de ativação é geralmente usada para ativar elementos da etiqueta e geralmente é usada para ativar e desativar elementos de formulário. Ao contrário de desativados, o valor correspondente também é do tipo BOOL.
<div><input type="text" data-bind="enable:IsMen"/></div><script type="text/javascript">//1.Define ViewModelvar myViewModel = {Name: ko.observable("Lilei"),Profession: ko.observable("Software Engineer"),Age: Ko.observable (40), ismen: ko.observable (true)}; // 2. Ative o ko.applybindings de ligação (myViewModel); myViewModel.ismen (false); </sCript>Como a propriedade ISMEN se torna falsa, todas as caixas de texto correspondentes exibirão um status desativado.
4.5. desabilitado
Ao contrário da habilitação, o uso é semelhante ao habilitação.
4.6. opções
No exposto, as opções foram usadas ao usar a ligação selecionada, que representa o conjunto de opções da tag de seleção, e o valor correspondente é uma matriz, representando a fonte de dados desta caixa suspensa. O monitoramento dessa fonte de dados pode ser ativado usando o ObservableArray. Veja acima para uso.
4.7.html
A ligação de texto é na verdade a configuração e o valor da tag inertext. Da mesma forma, a ligação ao HTML também é a configuração e o valor do inerhtml. Seu valor correspondente é uma tag html.
4.8. CSS
A ligação do CSS é adicionar ou remover um ou mais estilos (classes) ao elemento DOM. Use formato:
<style type = "text/css">. testeBold {background-color: powderblue;} </style> <div data-bind = "css: {testbold: myViewModel.name () == 'lilei'}"> aaaa </div> var myviewModel = {name: ko.ObS. Engenheiro "), idade: ko.observable (40)};Esta div exibirá a cor do plano de fundo.
Se você precisar adicionar ou remover vários estilos, basta alterá -los um pouco, por exemplo:
<div data-bind = "css: {testBold: myViewModel.name () == 'lilei', testborder: myviewmodel.profession () == 'php engenheiro'}"> aaaa </div>4.9. Estilo
Se a função da ligação CSS for adicionar ou remover dinamicamente os estilos de classe à tag, a função da ligação ao estilo será adicionar ou remover dinamicamente um certo estilo à tag. por exemplo:
<div data-bind = "css: {background-color: myviewmodel.name () == 'lilei'? 'Red': 'white'}"> aaaa </div>Se você adicionar ou remover múltiplo, como usar a ligação CSS
4.10, Att
A ligação ATTR é usada principalmente para adicionar e remover um ou mais atributos (incluindo atributos personalizados) à tag e é semelhante ao CSS.
4.11. Clique
Clique em vincular significa adicionar um método de execução de eventos de clique no elemento DOM correspondente. Pode ser usado em qualquer elemento.
<div> <input type = "button" value = "teste clique em encadernação" data-bind = "click: clickfunc" /> </div> var myViewModel = {clickfunc: function () {alert ($ (event.currentTarget) .val ());}}; ko.ApplyBindings (myviewModel);Event.CurrentTarget representa o elemento DOM atualmente clicado. Às vezes, por simplicidade, usamos diretamente as funções anônimas para se ligar, como:
<div> <input type = "button" value = "teste clique em ligação" data-bind = "click: function () {alert ('clicked');}" /> </div>No entanto, essa maneira de escrever JS no HTML dificulta a aceitação dos blogueiros, e eles acham que é relativamente inconveniente manter, especialmente quando a lógica no evento de cliques é um pouco complicada. Portanto, se não for necessário, não é recomendável escrever diretamente essa função anônima.
4.12. Outros
Para todas as ligações de dados de dados, você pode ver a introdução no site oficial e eu não as listarei uma a uma aqui. Quando você precisar, basta ir ao site oficial para conferir. Dê uma olhada em todas as ligações listadas no site oficial:
5. Transformação e relação entre objetos JSON e atributos de monitoramento
Sabemos que, para evitar métodos de apresentação direta em diferentes idiomas, em geral, usamos dados de formato JSON ao interagir com o front-end e o back-end. Usamos o modelo de dados recuperado do back-end através de solicitações HTTP. Para usar alguns dos recursos do nosso KO, devemos converter esses modelos de dados comuns em atributos de monitoramento da KO; Por outro lado, usamos os atributos de monitoramento de Ko e, às vezes, precisamos converter esses atributos em dados JSON comuns e passá -los para o plano de fundo. Então, como alcançar essa conversão?
5.1. Converta o objeto JSON em ViewModel
Por exemplo, pegamos um objeto JSON do segundo plano, depois o transformamos em nosso viewmodel e o ligamos à nossa interface DOM.
$ .ajax ({url: "/home/getData", type: "get", dados: {}, sucesso: function (dados, status) {var ojson = data;}});Enviamos uma solicitação para o back -end, pegamos um objeto JSON, atribuímos um valor a Ojson e depois convertemos o Ojson em ViewModel. A maneira mais intuitiva é convertê -lo manualmente. Por exemplo, podemos fazer isso:
var myViewModeljson = {DeptName: Ko.observable (), Deptlevel: Ko.observable (), Deptdesc: Ko.observable ()}; Ko.ApplyBindings (MyViewModeljson);Então, no sucesso solicitado pelo Ajax
Sucesso: function (dados, status) {var ojson = data; myviewmodeljson.deptname (ojson.deptname); myviewmodeljson.deptlevel (ojson.detplevel); myviewmodeljson.deptdesc (ojson.daptdesc);}Dessa maneira, através da ligação manual, é realizada a ligação do objeto JSON ao viewmodel. A vantagem de fazer isso é flexibilidade, a desvantagem é óbvia, a quantidade de código manual é muito grande.
Felizmente, com nosso código aberto universal, sempre há pessoas que criam uma maneira melhor. Podemos usar o componente knockout.mapping para nos ajudar a converter o objeto JSON da interface em ViewModel.
Knockout.Mping Open Source Endereço: Download
Vamos dar uma breve olhada em como é usado ou o exemplo acima. Não precisamos implementar a definição de qualquer viewModel. Primeiro, precisamos nos referir a Knockout.mapping.js
<script src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script> <script src = "~/scripts/knockout/extensions/knockout.mapping-latest.js"> </sCript>
NOTA: Aqui Knock.mapping-lastest.js deve ser colocado atrás do Knockout-3.4.0.min.js, caso contrário, o Ko.Mapping não poderá ser chamado.
Em seguida, use -o diretamente na função de sucesso
Sucesso: function (dados, status) {var myViewModeljson2 = ko.mapping.fromjs (data); ko.applybindings (myViewModeljson2);}Vamos ver o efeito:
Dúvida do código: O objeto JSON recuperado do plano de fundo através da solicitação AJAX é convenientemente convertido em ViewModel através do ko.Mapping.Fromjs (). Não é afiado? Obviamente, além desse uso, você também pode atualizar o ViewModel existente e usá -lo da seguinte forma:
var myViewModeljson = {deptName: ko.observable (), Deptlevel: ko.observable (), deptdesc: ko.observable ()}; ko.applybindings (myViewModeljson); $ () {$ .ajax ({{url (url (url (url)/home (url: (urlbels); {}, sucesso: function (dados, status) {ko.mapping.fromjs (dados, myViewModeljson)}});});No sucesso, atualize o ViewModel de MyViewModeljson de acordo com o valor dos dados.
5.2. Converta ViewModel em objeto JSON
Os mencionados acima que os objetos JSON são convertidos em ViewModel, então o que devemos fazer se precisarmos converter o viewmodel em objetos JSON e passá -lo para o back -end?
Existem dois métodos fornecidos no knockout:
• ko.tojs (): convert viewmodel em objeto json
• ko.tojson (): converta viewModel em string json serializada.
Por exemplo, nosso código é o seguinte:
$(function () {var oJson1 = ko.toJS(myViewModelJson);var oJson2 = ko.toJSON(myViewModelJson);});var myViewModelJson = {DeptName: ko.observable("R&D Department"),DeptLevel: ko.observable("2"),DeptDesc: Ko.observable ("Development Group")}; Ko.ApplyBindings (MyViewModeljson);Então vamos monitorar os valores de Ojson1 e Ojson2:
Dúvida de código: através da figura acima, é fácil entender a diferença entre os dois métodos. Deve -se notar aqui que esses dois métodos são incorporados ao KO e não exigem o suporte do componente de mapeamento.
6. Crie seu próprio atributo de ligação de dados
Eu falei muito acima e apresentarei alguma ligação e monitoramento no nocaute. Portanto, às vezes, precisamos personalizar nossa ligação de dados, como: <etiqueta data-bind = "mybind: name"> </belt>. Esse requisito é especialmente útil ao encapsular componentes. Pode ser implementado? claro.
No knockout, a propriedade Ko.BindingHandlers é fornecida para personalizar a propriedade de ligação de dados. Sua sintaxe é a seguinte:
ko.bindingHandlers.myselect = {init: function (elemento, valueAccessor, allBindingsAccessor, ViewModel) {}, update: function (element, valueAccessor, allbindingsaccessor, viewModel) {}};Basta declarar assim e, em seguida, você pode usar a ligação de dados personalizada em nossa tag HTML.
<div> <select data-bind = "mySelect: $ root"> <opção id = "1"> departamento de R&D </pption> <opção id = "2"> Departamento de Assuntos Humanos </pption> <option id = "3"> departamento administrativo </pption> </select> </div>
O MySelect é nossa propriedade de ligação personalizada. $ root pode ser entendido como inicialização por enquanto (embora essa explicação não seja rigorosa, se houver uma explicação mais razoável, sinta -se à vontade para corrigi -la).
Dúvida de código: os Ko.bindingHandlers acima podem ser usados para simplesmente implementar propriedades de ligação personalizadas. Dois pontos precisam ser explicados:
• Init, como o nome implica, inicializa a ligação personalizada. Ele contém vários parâmetros. Os dois primeiros parâmetros geralmente são usados com mais frequência. O primeiro parâmetro representa o elemento DOM que inicializa a ligação personalizada e o segundo parâmetro é geralmente usado para passar os parâmetros inicializados.
• Atualize, atualize o retorno de chamada, quando o atributo de monitoramento correspondente for alterado, esse método será inserido. Se nenhum retorno de chamada for necessário, esse método poderá não ser declarado.
Aqui, o blogueiro explicará brevemente o uso de ligações personalizadas com base em um componente de caixa suspensa Mutiselect que ele havia compartilhado.
6.1. O mais simples e museleto
De um modo geral, se precisarmos usar o KO para encapsular alguns componentes gerais, precisamos usar nossos Ko.BindingHandlers. O blogueiro discutirá como usá -lo em combinação com o componente Mutiselect.
Declare primeiro o ko.bindinghandlers personalizado e inicialize nossa tag de seleção no método init
ko.bindingHandlers.MySelect = {init: function (elemento, valueAccessor, AllBindingsAccessor, ViewModel) {$ (elemento) .multiseSelect ();}, atualização: função (elemento, valueacessor, allbindingsCescessor, viewModel) {};};Em seguida, use -o na tag da página
<div style = "text-align: Center;"> <select data-bind = "mySelect: $ root"> <opção id = "1"> departamento de P&D </pption> <opção id = "2">
A última parte da terceira parte, ativar a ligação
$ (function () {var multiSelect = {}; ko.applybindings (multisselect);});Se você não precisar passar os parâmetros, só precisará vincular um modelo de vista vazio. Algumas pessoas estão intrigadas, mas a terceira parte não sente que é prática. O entendimento do blogueiro é que o elemento DOM precisa usar o Data-Bind para vincular dados, e a ligação do KO deve ser ativada, que é o KO.ApplyBindings () aqui.
Obtenha o efeito:
6.2. Passagem do parâmetro
O primeiro passo é personalizar Ko.BindingHandlers
ko.bindingHandlers.MySelect = {init: function (elemento, valueAccessor, allBindingsAccessor, ViewModel) {var oparam = valueAcCessor (); $ (elemento) .multisElect (oparam); atualização: função (elemento, valueAcCsor.A segunda etapa é a mesma que acima, use essa ligação personalizada na tag HTML.
Etapa 3: passe nos parâmetros ao ativar a ligação
$ (function () {var multiSelect = {enableClickableOptGroups: true, // colapsando agrupamento onChange: function (opção, verificado) {alert ("selecione alteração");}}; ko.ApplyBindings (multisselect);});Através dessas três etapas, você pode passar os parâmetros para a inicialização de nossa Mutiselect:
Consultas de código: o segundo parâmetro do evento init, dissemos, sua principal função é obter os parâmetros transmitidos a partir do nosso ViewModel, mas aqui precisamos usá -lo como um método. Por que é usado tanto para ser estudado!
2. O primeiro exemplo de adição, exclusão, modificação e pesquisa
Neste ponto, as coisas básicas finalmente foram dispostas. Originalmente, planejei concluí -los em um artigo, mas não esperava que as coisas básicas fossem muito expandidas! Os exemplos de adição, exclusão, modificação e verificação estão incluídos no próximo artigo. Bootstraptable e KnockoutJs combinam -se para perceber a função de adicionar, excluir, modificar e verificar [2]. Bem -vindo a aprender e se comunicar, e é claro que você também pode recomendar!