Quiconque a joué KnockoutJs sait qu'il existe une fonction puissante appelée composante, et l'une des choses impressionnantes de ce composant est qu'il a son propre mode de vue et son modèle, comme les suivants:
ko.components.register ('Message-Editor', {ViewModel: function () {}, modèle: ""});De toute évidence, le ViewModel est le domaine de la fonction de fonction, et le modèle est la zone de modèle, puis le composant est enregistré en knockout via la fonction de registre. Voyons une fonction simple ci-dessous, qui consiste à afficher dynamiquement la longueur de longueur du contenu "d'entrée" actuel.
<! Doctype html> <html> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <title> </ title> <meta charset = "utf-8" /> <script src = "jquery-1.8.2.js"> </ script> src = "knockoutjs.js"> </ script> </ head> <body> <div data-bind = 'Component: "Message-éditor"'> </div> <script type = "text / javascrip '');}, modèle: 'Message: <entrée data-bind = "value: text" />' + '(longueur: <span data-bind = "text: text (). la longueur"> </span>)'}); ko.applybindings (); </cript> </body> </html>
Veuillez examiner de plus près ce code. Le composant actuel injectera le modèle de modèle dans la balise DIV du HTML, et il existe également une liaison de l'élément texte dans cette balise de modèle, et la source de données de ce (texte (). Longueur) se trouve être ce.Text dans le ViewModel. ． Droite. . . Avec l'intégration de ces deux, notre HTML final est montré comme suit:
Ensuite, nous entrons dans des numéros avec désinvolture et éloignons la souris. Pour le moment, l'événement de changement d'entrée sera déclenché, comme les suivants.
N'est-ce pas si cool? ? ? Bien sûr, certaines personnes peuvent demander si je donne un peu de valeur par défaut lorsque l'entrée est rendue? ? ? Est-ce que ça va? Bien sûr, c'est également possible. À l'heure actuelle, nous pouvons attribuer la valeur par défaut dans le disque de données et c'est OK. . . Par exemple, ce qui suit est:
<body> <h4> Deuxième instance, passant paramètres </h4> <div data-bind = 'Component: {name: "Message-Editor", params: {InitialText: "Hello, World!" }} '> </ div> <script type = "text / javascript"> ko.components.register (' message-éditor ', {ViewModel: function (params) {this.text = ko.observable (params && params.InitialText ||' ');}, template:' message: <putant-bind = "value: Text" / '+' +: <Message: <Entrée Data-Bind = "Value: Text"! data-bind = "text: text (). Length"> </span>) '}); ko.applybindings (); </cript> </body>Vous pouvez voir que dans le code ci-dessus, j'ai ajouté une propriété InitialText à l'objet Params dans le composant, et à l'heure actuelle, je peux injecter dynamiquement ce texte initial dans notre ViewModel, puis nos éléments d'entrée et d'étendue s'abonnent à cette propriété de surveillance de texte dans ce mode ViewModel via le discours de données. À l'heure actuelle, une opération de mise à jour en temps réel se produit. J'ai hâte de jeter un coup d'œil ~
1: Analyse des problèmes
D'accord, grâce à la démonstration ci-dessus, vous avez peut-être trouvé les deux problèmes suivants. Le premier problème est qu'il est si puissant. Tant que vous vous inscrivez, vous n'avez pas besoin d'appliquer un ViewModel via des applications, ce qui réalisera la modularisation de la page, ce qui est vraiment pratique ~ donc ce problème est une bonne chose. Le deuxième problème est que le contenu de notre modèle de modèle est sous la forme de "codé dur", c'est-à-dire s'il y a beaucoup de ce contenu, tels que 100 lignes et 200 lignes, sommes-nous fous? ? ? Peu importe à quel point vous êtes capable, vous ne pouvez pas les épisser un par un. Même si vous les épissez, le coût de maintenance est trop élevé. La question est donc de savoir comment tourner dynamiquement le contenu du modèle? ? ? Par exemple, la page de la bibliothèque Baidu que nous voyons en réalité. . . Comme indiqué dans la figure ci-dessous:
Il existe de nombreux modules dans cette page, comme les trois ci-dessus, je suis encerclé. Il doit y avoir beaucoup de HTML dans ces trois modules ~~~
Deux: acquisition dynamique du modèle
Il existe généralement deux façons d'obtenir dynamiquement le contenu HTML. Le premier est requisejs. Bien sûr, vous devez référencer un tel JS. La seconde consiste à réécrire leurs modèles. Bien sûr, dans cet article, ce que nous devons faire est de réécrire la fonction LoadTemplate dans le composant, puis de remplacer le chargeur par défaut. N'est-ce pas très simple? ? ?
1. Réécrivez la méthode LoadTemplate
// Étape 1: réécrivez la méthode LoadTemplate var templatefromurlloader = {loadTemplate: function (name, templateConfig, callback) {if (templateconfig.fromurl) {var fullurl = '/' + templateconfig.fromurl // ajax get get the external File Contenu {ko.components.defaultloader.loadTemplate (nom, MarkUpString, rappel);});} else {callback (null);}}}; // remplacer le Téle-défaut d'origine et implémenter le nouveau modèlefromurlloaderko.components.loaders.unshift (templatefromurlloder);2. Mettez la codage dur dans un fichier externe, par exemple, j'ai créé un nouveau fichier File.html.
3. Enregistrez le composant, puis reportez-vous au chemin de fichier externe sur la balise du modèle, comme le suivant {FromUrl: 'file.html'}
ko.components.register ('message-editor', {ViewModel: function (params) {this.text = ko.observable (params && params.InitialText || '');}, modèle: {fromUrl: 'file.html'},});D'accord, toutes les fonctions sont prêtes. Parcourons la page pour voir à quoi cela ressemble? ? ?
Enfin, le grand travail a été fait. Est-ce que c'est vrai? Ensuite, peut-il être étendu à l'exemple de "Baidu Library" introduit ci-dessus. Nous pouvons mettre le HTML de chaque module dans un fichier séparé.
<! Doctype html> <html> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <title> </ title> <meta charset = "utf-8" /> <script src = "jquery-1.8.2.js"> </ script> src = "knockoutjs.js"> </ script> </ head> <body> <div data-bind = 'Component: {name: "Message-Editor", params: {initialText: "Hello !!!" }} '> </ div> <script type = "text / javascript"> // étape 1: réécrivez la méthode de chargement var templatefromurlloader = {loadTemplate: function (nom, templateconfig, callback) {if (templateconfig.fromurl) {var fullurl =' / + templateConfig. Contenu de fichier externe $ .get (fulrl, function (MarkUpString) {ko.components.defaultloader.loadTemplate (name, markupString, callback);});} else {callback (null);}}}; // Remplacez le chargeur de défaut d'origine et implémentez le nouveau le nouveau le nouveau le nouveau et implémentez le nouveau TemplateFromurlloaderko.Components.Loadhers.unshift (TemplateFromurlLoader); ko.components.register ('Message-Editor', {ViewModel: fonction (params) {this.text = ko.observable (params && params.initialtex },}); ko.applybindings (); </cript> </ body> </html>Ce qui précède est la méthode de chargement dynamiquement des fichiers externes dans knockoutjs comme méthode d'implémentation de la source de données de modèle dans le composant. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!