Qualquer pessoa que tocou knockoutjs sabe que existe uma função poderosa chamada componente, e uma das coisas impressionantes sobre esse componente é que ele tem seu próprio viewmodel e modelo, como o seguinte:
ko.comPONENTS.Register ('Message-Editor', {ViewModel: function () {}, modelo: ""});Obviamente, o ViewModel é a área de função da função e o modelo é a área do modelo e, em seguida, o componente é registrado no nocaute através da função de registro. Vamos demonstrar uma função simples abaixo, que é exibir dinamicamente o comprimento do comprimento do conteúdo atual de "entrada".
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><script src="jquery-1.8.2.js"></script><script src = "knockoutjs.js"> </script> </head> <body> <div data-bind = 'componente: "message-editor"'> </div> <script type = "text/javascript"> ko.components.register ('message-editor', {viewModel: function (params) { '');}, modelo: 'mensagem: <input data-bind = "value: text"/>'+ '(comprimento: <span data-bind = "text: text (). length"> </span>'}); ko.applybindings (); </cript> </body> </html>Por favor, veja mais de perto este código. O componente atual injetará o modelo de modelo na tag Div do HTML e também há uma ligação do elemento de texto nesta tag de modelo, e a fonte de dados deste (text (). Comprimento) é esse.Text no viewModel. ． Certo. . . Com a integração desses dois, nosso HTML final é mostrado da seguinte maneira:
Em seguida, entramos em alguns números casualmente e afastamos o mouse. Neste momento, o evento de mudança de entrada será acionado, como o seguinte.
Não é tão legal? ? ? Obviamente, algumas pessoas podem perguntar, e se eu der um pequeno valor padrão quando a entrada for renderizada? ? ? Está tudo bem? Claro, também é possível. No momento, podemos atribuir o valor por padrão em dados de dados e está ok. . . Por exemplo, o seguinte é:
<body> <h4> Segunda instância, Passando parâmetros </h4> <div data data-bind = 'componente: {name: "message-editor", params: {inicialtext: "Olá, mundo!" }} '> </div> <script type = "text/javascript"> ko.components.register (' message-editor ', {viewModel: function (params) {this.text = ko.observable (params && params.initialText ||' '); data-bind = "text: text (). length"> </span>) '}); ko.applybindings (); </script> </body>Você pode ver que, no código acima, adicionei uma propriedade de inicialização ao objeto Params no componente e, neste momento, posso injetar dinamicamente esse início de inicialização em nosso viewModel e, em seguida, nossos elementos de entrada e span se inscrevem nesta propriedade de monitoramento de text neste ViewModel por meio de dados. No momento, ocorre uma operação de atualização em tempo real. Mal posso esperar para dar uma olhada ~
1: Análise de problemas
Ok, através da demonstração acima, você pode ter encontrado os dois problemas a seguir. O primeiro problema é que é tão poderoso. Desde que você se registre, você não precisa aplicar um viewmodel através do ApplyBindings, que perceberá a modularização da página, o que é realmente conveniente ~ para que esse problema seja uma coisa boa. O segundo problema é que o conteúdo em nosso modelo de modelo está na forma de "codificado", ou seja, se há muito desse conteúdo, como 100 linhas e 200 linhas, somos loucos? ? ? Não importa o quão capaz você seja, você não pode conspitá -los um por um. Mesmo se você os deduzir, o custo de manutenção é muito alto. Portanto, a questão é: como transformar dinamicamente o conteúdo do modelo? ? ? Por exemplo, a página da Biblioteca Baidu que vemos na realidade. . . Como mostrado na figura abaixo:
Existem muitos módulos nesta página, como os três acima que circulei. Deve haver muito html nesses três módulos ~~~
Dois: aquisição dinâmica de modelo
Geralmente, existem duas maneiras de obter dinamicamente o conteúdo HTML. O primeiro é requerjs. Claro, você precisa referenciar esse js. O segundo é reescrever seus modelos. Obviamente, neste artigo, o que precisamos fazer é reescrever a função LoadTemplate no componente e, em seguida, substituir o carregador DefaultLoader. Não é muito simples? ? ?
1. Reescreva o método do modelo de carga
// Etapa 1: reescreva o método loadtemplate var modelo de fromurllOader = {loadtemplate: function (nome, templateConfig, retorno de chamada) {if (templateConfig.fromurl) {var fullurl = '/' + templeconfig.fromurl // ajax dinâmico dinâmico {ko.comPONENTS.DefaultLoader.LoadTemplate (nome, MarkupString, retorno de chamada);});} else {retorno de chamada (null);}}}; // substitua o padrão padrão e implemente o novo templatefromurlloaderko.comPONENTS.OLLOGERS.UNSHIFT (METEMFROMLLLORLLORLORKORERKO.COMERNENTS.UNLOVERS.UNSHIFT (METLEFROMLLO;2. Coloque o código duro em um arquivo externo, por exemplo, criei um novo arquivo file.html.
3. Registre o componente e, em seguida, consulte o caminho do arquivo externo na tag de modelo, como o seguinte {Fromurl: 'file.html'}
ko.comPONENTS.Register ('Message-Editor', {ViewModel: function (params) {this.text = ko.observable (params && params.initialtext || '');}, modelo: {fromurl: 'file.html'},});Ok, todas as funções estão prontas. Vamos navegar na página para ver como é? ? ?
Finalmente, o excelente trabalho foi feito. Está certo? Então pode ser estendido ao exemplo da "Biblioteca Baidu" introduzida acima. Podemos colocar o HTML de cada módulo em um arquivo separado.
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><script src="jquery-1.8.2.js"></script><script src = "knockoutjs.js"> </script> </ad Head> <body> <div data-bind = 'componente: {name: "message-editor", params: {itesext: "hello !!!" }} '> </div> <script type = "text/javascript"> // Etapa 1: reescreva o método loadtemplate var mod modelfromurllOader = {loadtemplate: function (nome, templateConfig, retorno de chamada) {if (templateConfig.fromurl) {varlurl) Obtenha conteúdo de arquivo externo $ .get (fullurl, function (markupstring) {ko.components.defaultload.loadtemplate (nome, markupstring, retorno de chamada);});} else {chamado de retorno (nulo);}}}; // Substitua o defaultloader original e implemente o novo templatefromurlloaderko.comPONENTS.OLLOWERS.UNSHIFT (templateFromurlLoader); ko.comPONENTS.Register ('message-editor', {ViewModel: function (params) {this.text = ko.observable (params && params.Initialtext || ''; },}); ko.applybindings (); </script> </body> </html>O acima exposto é o método de carregar dinamicamente arquivos externos nos knockoutjs como o método de implementação da fonte de dados de modelo no componente. 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!