Cualquiera que haya jugado knockoutjs sabe que hay una función poderosa llamada componente, y una de las cosas increíbles de este componente es que tiene su propio ViewModel y plantilla, como lo siguiente:
ko.components.register ('Message-Editor', {ViewModel: function () {}, plantilla: ""});Obviamente, ViewModel es el área de función de función, y la plantilla es el área de la plantilla, y luego el componente está registrado en Knockout a través de la función de registro. Demostremos una función simple a continuación, que es mostrar dinámicamente la longitud de longitud del contenido actual de "entrada".
<! DOCTYPE HTML> <HTML> <HEAD> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </stitte> <meta Charset = "utf-8"/> <script src = "jQuery-1.8.2.js"> </script> <script <script <script " src = "knockoutjs.js"> </script> </head> <body> <div data-bind = 'component: "message-editor"'> </div> <script type = "text/javaScript"> ko.components.register ('mensajes-editor', {vermodel: function (params) {this.text = ko.observable ((params.arss.arss. '');}, plantilla: 'mensaje: <input data-bind = "value: text"/>'+ '(longitud: <span data-bind = "text: text (). longitud"> </span>)'}); ko.applyBindings (); </script> </body> </html>Por favor, eche un vistazo más de cerca a este código. El componente actual inyectará la plantilla de plantilla en la etiqueta DIV del HTML, y también hay una unión del elemento de texto en esta etiqueta de plantilla, y la fuente de datos de este (texto (). Longitud) es esto. ． Bien. . . Con la integración de estos dos, nuestro HTML final se muestra de la siguiente manera:
A continuación, entramos casualmente en algunos números y alejamos el mouse. En este momento, el evento de cambio de entrada se activará, como el siguiente.
¿No es tan genial? ? ? Por supuesto, algunas personas pueden preguntar, ¿qué pasa si doy un pequeño valor predeterminado cuando se representa la entrada? ? ? ¿Está bien? Por supuesto, también es posible. En este momento, podemos asignar el valor de forma predeterminada en el enlace de datos y está bien. . . Por ejemplo, lo siguiente es:
<body> <h4> Segunda instancia, pase de parámetros </h4> <div data-bind = 'component: {name: "Message-Editor", Params: {InitialText: "¡Hola, mundo!" }}} '> </div> <script type = "text/javaScript"> ko.components.register (' mensaje-editor ', {vermodel: function (params) {this.text = ko.ObServable (valle (params && params.iniatialText ||' '' '); data-bind = "text: text (). Longitud"> </span>) '}); ko.applybindings (); </script> </body>Puede ver que en el código anterior, agregué una propiedad InitialText al objeto Params en el componente, y en este momento, puedo inyectar dinámicamente este TeText Initial en nuestro Modelo ViewModel, y luego nuestros elementos de entrada y SPAN se suscriben a esta. En este momento, se produce una operación de actualización en tiempo real. No puedo esperar para echar un vistazo ~
1: Análisis de problemas
De acuerdo, a través de la demostración anterior, es posible que haya encontrado los siguientes dos problemas. El primer problema es que es tan poderoso. Mientras se registre, no necesite aplicar un Modelo ViewModel a través de ApplicEbindings, que se dará cuenta de la modularización de la página, que es realmente conveniente ~ por lo que este problema es algo bueno. El segundo problema es que el contenido en nuestra plantilla de plantilla está en forma de "codificación dura", es decir, si hay mucho de este contenido, como 100 líneas y 200 líneas, ¿estamos locos? ? ? No importa cuán capaz que seas, no puedes empalmarlos uno por uno. Incluso si los emplomas, el costo de mantenimiento es demasiado alto. Entonces, la pregunta es, ¿cómo cambiar dinámicamente el contenido de la plantilla? ? ? Por ejemplo, la página de la Biblioteca Baidu que vemos en realidad. . . Como se muestra en la figura a continuación:
Hay muchos módulos en esta página, como los tres anteriores que rodeé. Debe haber mucho HTML en estos tres módulos ~~~
Dos: adquisición dinámica de plantilla
Por lo general, hay dos formas de obtener dinámicamente contenido HTML. El primero es requeríajs. Por supuesto, debe hacer referencia a tal JS. El segundo es reescribir sus plantillas. Por supuesto, en este artículo, lo que debemos hacer es reescribir la función LoadTemplate en el componente y luego reemplazar el cargador de cargador predeterminado. ¿No es muy simple? ? ?
1. Reescribe el método LoadTemplate
// Paso 1: Reescribe el método LoadTemplate var TemplateFromurLloader = {loadTemplate: function (name, templateConFig, llamado) {if (templateConfig.fromurl) {var fullURL = '/' + TEMPLATECONFIG.FROMURL // AJAX DYNAMICAL Get el contenido de archivo externo. {ko.components.defaultloader.loadTemplate (name, markUpString, callback);});} else {callback (null);}}}; // reemplazar el defaulter original e implementar el nuevo templatefromurloaderko.components.loaders.unshift (Templatefromurlloader);2. Ponga el código duro en un archivo externo, por ejemplo, creé un nuevo archivo File.html.
3. Registre el componente y luego consulte la ruta del archivo externo en la etiqueta de plantilla, como la siguiente {fromurl: 'file.html'}
ko.components.register ('Message-Editor', {ViewModel: function (params) {this.text = ko.observable (params && params.initialText || '');}, plantlate: {fromurl: 'file.html'},});Bien, todas las funciones están listas. Naveguemos por la página para ver cómo se ve. ? ?
Finalmente, el gran trabajo se realizó. ¿Es correcto? Entonces se puede extender al ejemplo de la "Biblioteca Baidu" introducida anteriormente. Podemos poner el HTML de cada módulo en un archivo separado.
<! DOCTYPE HTML> <HTML> <HEAD> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </stitte> <meta Charset = "utf-8"/> <script src = "jQuery-1.8.2.js"> </script> <script <script <script " src = "knockoutjs.js"> </script> </head> <body> <div data-bind = 'component: {name: "Message-Editor", Params: {InitialText: "¡Hola!" }} '> </div> <script type = "text/javascript"> // Paso 1: Reescribir el método LoadTemplate var TemplateFromurlloader = {loadTemplate: function (name, templateConFig, llamado) {if (templateConfig.fromurl) {var fullUrl ='/' + TEMCOCONFIGFIGRAMA Obtenga dinámicamente contenido de archivo externo $ .get (fullURL, function (markUpString) {ko.components.defaultloader.loadTemplate (name, markUpString, llamado);});} else {llamado (nulo);}}}; // Reemplaza el carga predeterminada original e implementa el nuevo TemplateFromurlloaderko.components.loaders.unshift (templateFromurlloader); ko.components.register ('mensaje-editor', {viewModel: function (params) {this.text = ko.observable (params && params.initialText || '');}, template: {deurl: '. },}); ko.applyBindings (); </script> </body> </html>Lo anterior es el método de cargar dinámicamente archivos externos en knockoutjs como el método de implementación de la fuente de datos de plantilla en el componente. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!