Bootstrap est un cadre frontal, une bonne chose pour la libération de développeurs Web. Il montre que l'interface utilisateur est très haut de gamme, atmosphérique et haut de gamme. En théorie, vous n'avez pas besoin d'écrire une ligne de CSS. Ajoutez simplement les attributs appropriés à la balise.
Knockoutjs est un framework MVVM implémenté par JavaScript. Très bien. Par exemple, après avoir ajouté ou diminué les éléments de données de liste, il n'est pas nécessaire de rafraîchir l'ensemble du fragment de contrôle ou d'écrire des nœuds JS et de suppression par vous-même. Définissez simplement le modèle et les attributs qui répondent à ses définitions de syntaxe. Autrement dit, nous avons seulement besoin de prêter attention à l'accès aux données.
1. Introduction à Knockout.js
1. Knockout.js et mvvm
De nos jours, divers cadres frontaux sont écrasants et éblouissants. Parfois, je dois soupirer que, comme un programmeur est vraiment difficile, il y a toujours des techniques sans fin à apprendre. Quand cela se terminera-t-il, sauf si vous vous transformez! La mer de souffrance est sans limites, et si c'est le rivage lorsque vous regardez en arrière, c'est à vous!
Knockout.js est un cadre frontal léger basé sur le mode MVVM. À quel point est-il léger? Selon la dernière version V3.4.0 affichée sur le site officiel, il n'est que de 22 Ko. Il peut gérer la liaison entre le modèle de données et l'interface DOM de manière conviviale. La chose la plus importante est que sa contrainte est bidirectionnelle. C'est-à-dire que si le modèle de données change, les données sur l'interface DOM changent également en conséquence. Inversement, si les données sur l'interface DOM change, le modèle de données changera également en conséquence. Cela peut réduire considérablement la quantité de notre code frontal et rendre notre interface facile à maintenir, et nous n'avons plus à écrire beaucoup de modèles de données de surveillance des événements et de modifications DOM d'interface. Le blogueur illustrera ces deux points sur la base d'un exemple d'utilisation ci-dessous.
Site Web officiel knockout.js: http://knockoutjs.com
Knockout.js Adresse open source: https://github.com/knockout/knockout
Mode MVVM: Il s'agit d'un modèle de conception pour créer des interfaces utilisateur. MVVM le divise en trois pièces, à savoir le modèle, la vue et la vue ViewModel, le modèle est le modèle de données, la vue est notre vue, et ViewModel est un modèle de vue, utilisé pour lier le modèle de données et les éléments DOM sur la vue. Si vous avez utilisé WPF et Silverlight, comprendre cela ne devrait pas être un problème; Ce n'est pas un problème de ne pas l'avoir utilisé. Après avoir lu cet article, vous aurez une compréhension générale.
2. L'exemple le plus simple
D'une manière générale, si vous utilisez knockout.js à partir de zéro, vous devez faire au moins les quatre parties suivantes
2.1. Accédez au site officiel pour télécharger le fichier knockout.js, puis citez-le sur la page Afficher.
<script src = "~ / scripts / knockout / knockout-3.4.0.min.js"> </ script>
Remarque: knockout.js ne nécessite pas le support jQuery. Si votre projet nécessite des opérations liées à JQuery, reportez-vous à jQuery; Sinon, ne référez que les fichiers ci-dessus.
2.2. Définir ViewModel
Qu'est-ce que ViewModel? En fait, dans JS, il ressemble à un objet JSON. Nous définissons un mode de vue:
var myViewModel = {name: "lilei", profession: "ingénieur logiciel",};2.3. Définissez la balise qui lie les données dans la vue de la vue
<div> Nom: <Label Data-Bind = "Text: Name"> </ Label> <Br /> Profession: <Input Type = "Text" Data-Bind = "TextInput: Profession" /> </div>
Remarque: TextInput est requis pour le texte correspondant aux balises d'entrée, tandis que le texte pour le texte pour les balises ordinaires est requis.
2.4. Activer la liaison
Après avoir fait les trois étapes ci-dessus, vous devez également activer la liaison du knockout
KO.ApplyBindings (MyViewModel);
En faisant ces quatre parties, la liaison de données ViewModel la plus simple est essentiellement implémentée. Obtenez l'effet:
Si vous faites suffisamment attention, vous constaterez que la méthode KO.ApplyBindings () a deux paramètres. Le premier est le ViewModel que nous devons lier, et quelle est la seconde? De KO.ApplyBindings (MyViewModel); Nous pouvons voir que le deuxième paramètre est un paramètre facultatif, qui représente la portée de la balise liée au ViewModel. Par exemple, changeons le code ci-dessus:
<div> name: <label id = "lb_name" data-bind = "text: name"> </ label> <br /> profession: <input type = "text" data-bind = "textInput: profession" /> </ div> ko.applybindings (myViewModel, document.getElementyid ("lb_name"));Obtenez le résultat:
À partir de cela, nous pouvons voir que le deuxième paramètre définit l'étendue de l'action de MyViewModel, c'est-à-dire que seule la liaison sur l'étiquette d'id = "lb_name" prendra effet. Si le deuxième paramètre est une étiquette de conteneur tel que Div, cela signifie que la portée de la liaison est toutes des sous-marques sous le div.
3. Attributs de surveillance
À partir des quatre étapes ci-dessus, nous ne voyons aucun effet. Ce que nous voyons n'est rien de plus que de lier les données d'un objet JSON à la balise HTML. Quel est l'intérêt de faire cela? Ne complique-t-il pas les problèmes simples? Ne vous inquiétez pas, assistez tout de suite au miracle! Comme mentionné ci-dessus, la signification la plus importante du knockout réside dans la liaison bidirectionnelle. Alors, comment réaliser notre liaison bidirectionnelle? La réponse est de surveiller les attributs.
Dans KO, il y a trois attributs de surveillance dans le noyau: observables, fonctionnalités dépendantes, observableArray. La signification de l'observation est traduite par observation et observation. S'il est inapproprié de dire qu'il s'agit d'un attribut d'observation ou d'un attribut d'observation, nous l'appellerons un attribut de surveillance pour le moment.
3.1. Observables: Propriétés de surveillance
Changeons l'exemple ci-dessus à ceci:
<A-Head> <Meta Name = "Viewport" Content = "width = Device-Width" /> <Title> Index3 </Title> <script src = "~ / scripts / jQuery-1.9.1.min.js"> </ script> <script src = "~ / scripts / knockout / knockout-3.4.0.min.js"> </cript> <morfory> Data-Bind = "Text: Name"> </ Label> <Br /> Profession: <Input Type = "Text" Data-Bind = "TextInput: Profession" /> </ Div> <div> <Input Type = "Text" ID = "TXT_TESTOBSERVable" /> </ Div> <Script Type = "Text / Javascrip ko.observable ("lilei"), profession: "ingénieur logiciel",}; // 2. Activez la liaison KO.ApplyBindings (MyViewModel); $ (function () {// enregistrez l'événement TextChange $ ("# txt_testobservable"). Sur ("Input", function () {MyViewModel.name ($ (this) .val ());});});La signification de cette phrase est d'ajouter la propriété du nom du ViewModel à une propriété de surveillance. La propriété du nom doit devenir une propriété de surveillance. Une chose magique se produira. Jetons un coup d'œil lorsque nous écrivons MyViewModel.:
Le nom est passé de la propriété d'origine à une méthode, c'est-à-dire une fois que ko.observable () est ajouté, la propriété correspondante deviendra une méthode. Par conséquent, la valeur et l'attribution du nom doivent être gérées à l'aide de MyViewModel.name (). Jetons un coup d'œil à l'effet:
Doute de code: il est évident que MyViewModel.name ($ (this) .val ()); Cette phrase attribue la valeur de la zone de texte actuelle à la propriété du nom. Étant donné que l'interface lie la propriété du nom, la valeur de l'étiquette change également en conséquence. Ou vous diriez que cela peut être fait en utilisant l'événement TextChange. Tant que la valeur de la zone de texte actuelle est attribuée à la balise d'étiquette, cet effet peut être obtenu, ce qui n'est rien. En effet, votre méthode d'écriture peut également atteindre l'objectif, mais l'importance de notre attribut de surveillance est que lorsque la valeur du nom est modifiée n'importe où, l'interface changera en conséquence, sans attribuer des valeurs aux balises d'étiquette à chaque endroit. Dans JS, il vous suffit de vous concentrer sur MyViewModel.Name (). N'est-ce pas très génial ~~
3.2. Dépendant de l'observable: surveillance des propriétés de dépendance
Si vous avez lu les attributs de surveillance ci-dessus, vous n'êtes pas encore satisfait? Jetons un coup d'œil à l'utilisation des attributs de dépendance de surveillance.
Changeons le code et jetons un coup d'œil:
<A-thead> <meta name = "Viewport" Content = "width = Device-Width" /> <Title> index3 </ title> <script src = "~ / scripts / jQuery-1.9.1.min.js"> </ script> <script src = "~ / scripts / knockout / knockout-3.4.0.min.js"> </cript> </clipt> type = "text" data-bind = "textInput: name" /> <br /> profession: <input type = "text" data-bind = "textInput: profession" /> <r /> /> description: <label data-bind = "text: des"> </ label> </ div> <script type = "text / javascrip ko.observable ("lilei"), profession: ko.observable ("ingénieur logiciel"),}; myViewModel.des = ko.dependentObservable (function () {return "je suis nommé -" + myViewModel.Name () + ", occupation -" + myViewModel.Profession ();}); // 2. Activez la liaison KO.ApplyBindings (MyViewModel); </cript> </body>Jetons un coup d'œil à l'effet:
Doute de code: En ajoutant de la surveillance de la dépendance, l'attribut ko.dependentObservable (), la valeur de l'attribut DES peut être surveillée en même temps aux changements de nom et de professeur. Si l'un d'eux change, la balise DES déclenchera le changement. Le plus grand avantage de cela est d'éviter la difficulté de faire fonctionner le DOM par JS, ce qui est intéressant.
3.3. ObservableArray; Surveiller les tableaux
En plus des deux ci-dessus, KO prend également en charge la surveillance des objets de tableau. Jetons un coup d'œil à un exemple:
<A-thead> <meta name = "Viewport" Content = "width = Device-Width" /> <Title> index3 </ title> <script src = "~ / scripts / jQuery-1.9.1.min.js"> </ script> <script src = "~ / scripts / knockout / knockout-3.4.0.min.js"> </cript> Data-Bind = "Options: Deptarr, OptionSText: 'name'"> </lect> </ div> <v> <input type = "text" id = "txt_testoBservable" /> <input type = "Button" id = "btn_test" value = "new Department" / Ko.OBServAw 1, nom: 'R&D Department'}, {id: 2, nom: 'département administratif'}, {id: 3, nom: 'Département des affaires humaines'}]); var ViewModel = {Deptarr: Deptarr,}; Ko.ApplyBinding gensDécouvrez l'effet:
Doute de code: la méthode ci-dessus ko.observablearray () ajoute la surveillance des objets de tableau. C'est-à-dire que partout dans JS, tant que les modifications du tableau sont apportées à l'objet de tableau Deptarr, l'interface utilisateur sera déclenchée pour en donner une. Une chose à noter est que le tableau de surveillance est en fait l'objet de tableau surveillé lui-même, et il ne peut pas être surveillé pour les modifications des propriétés de l'objet enfant dans l'objet de tableau. Par exemple, nous modifions l'événement de clic pour ceci:
$ (function () {$ ("# btn_test"). sur ("click", function () {deptarr [1] .name = "aaa";});});Effet:
Cela montre que la surveillance du tableau surveille en fait l'objet de tableau lui-même et ne surveillera pas les changements dans les attributs des éléments dans le tableau. Si vous devez vraiment surveiller les changements de propriété des objets dans les données, vous devez utiliser ko.observable () pour la propriété des objets dans les données, et les deux sont utilisés ensemble. Si vous êtes intéressé, vous pouvez l'essayer.
4. Attributs de données de données courantes dans KO
Dans ce qui précède, nous avons utilisé plusieurs attributs de données de données, alors combien d'attributs de données de données de données y a-t-il lors de knockout? Ici, nous énumérons certaines propriétés couramment utilisées.
4.1. Texte et InputText
Le texte, comme son nom l'indique, signifie le texte. Cet attribut de liaison est généralement utilisé pour afficher du texte avec des balises telles que <Babel>, <span>, <div>, etc. Bien sûr, si vous le souhaitez, cette liaison peut être utilisée pour n'importe quelle balise. Ce n'est essentiellement rien à dire sur l'utiliser. Si ko.observable () n'est pas utilisé, c'est une liaison statique, sinon c'est une liaison dynamique.
InputText, le texte de la balise d'entrée, équivaut à l'attribut de valeur de la balise d'entrée.
<div> Nom: <label data-bind = "text: name"> </ label> <rr /> profession: <input type = "text" data-bind = "textInput: profession" /> </ div> //1.define ViewModelvar MyViewModel = {name: ko.observable ("lilei"), profession: "Software Engineer",}; // 2. Activer la liaison ko.applybindings (myViewModel);4.2. Valeur
Cette propriété de liaison est généralement utilisée pour les étiquettes d'entrée, ce qui est essentiellement similaire au TEXT-Text ci-dessus. Mais la valeur est plus standardisée.
La valeur est également utilisée avec une valeur de paramètre, ce qui indique le fonctionnement de l'interface lorsque la valeur est mise à jour. Les valeurs principales de ValueUpdate incluent Change / Keyup / Keypress / AfterKeyDown, etc. Il indique la valeur du ViewModel correspondant à la valeur lorsque le texte change, le clavier rétrécissant, le clavier appuyant, le clavier, appuyant sur le clavier, etc.
Nom: <input type = "text" data-bind = "value: name, ValueUpdate: 'keyup'" /> <br /> var myViewModel = {name: ko.observable ("lilei"),}; // 2. Activer la liaison ko.applybindings (myViewModel);Le code ci-dessus indique que l'attribut de valeur de la zone de texte et l'attribut de nom de MyViewModel sont mis à jour lorsque le clavier est fermé.
4.3. À carreaux
La liaison vérifiée est généralement utilisée pour la case à cocher, la radio et d'autres éléments de formulaire qui peuvent être sélectionnés, et sa valeur correspondante est le type BOOL. L'utilisation de la valeur est fondamentalement similaire, donc je ne le répéterai pas.
4.4. activer
Activer la liaison est généralement utilisé pour activer les éléments d'étiquette et est généralement utilisé pour activer et désactiver les éléments de forme. Contrairement aux handicapés, la valeur correspondante est également le type bool.
<div> <input type = "text" data-bind = "activer: ismen" /> </ div> <script type = "text / javascript"> // 1.define ViewModelvar myViewModel = {name: ko.observable ("lilei"), profession: ko.observable ("ingénieur logiciel"), Age: KO.Observable (40), Ismen: KO.Observable (true)}; // 2. Activez la liaison ko.applybindings (myViewModel); myViewModel.ismen (false); </cript>Étant donné que la propriété Ismen devient fausse, toutes les zones de texte correspondantes afficheront un état désactivé.
4.5. désactivé
Contrairement à l'activation, l'utilisation est similaire à l'activation.
4.6. options
Dans ce qui précède, des options ont été utilisées lors de l'utilisation de la liaison sélectionnée, qui représente l'ensemble des options de la balise de sélection, et la valeur correspondante est un tableau, représentant la source de données de cette boîte déroulante. La surveillance de cette source de données peut être activée à l'aide d'ObservableArray. Voir ci-dessus pour l'utilisation.
4.7.html
La liaison du texte est en fait le paramètre et la valeur de la balise InnerText. De même, la liaison HTML est également le réglage et la valeur de l'InnerHTML. Sa valeur correspondante est une balise HTML.
4.8. CSS
La liaison CSS est d'ajouter ou de supprimer un ou plusieurs styles (classes) à l'élément DOM. Utilisez le format:
<style type = "text / css">. TestBold {background-Color: PowderBlue;} </ style> <div data-bind = "css: {testbold: myViewModel.Name () == 'lilei'}"> aaaa </ div> var myViewModel = {name: ko.observable ("lilei") professionnel (ko. (ko.obserable ("lilei") Profession: Ko. Ingénieur "), âge: ko.observable (40)};Cette div affichera la couleur d'arrière-plan.
Si vous devez ajouter ou supprimer plusieurs styles, modifiez-les légèrement, par exemple:
<div data-bind = "css: {testbold: myViewModel.name () == 'lilei', testber: myViewModel.Profession () == 'Php Engineer'}"> aaaa </div>4.9. Style
Si la fonction de la liaison CSS est d'ajouter ou de supprimer dynamiquement les styles de classe à la balise, la fonction de la liaison de style est d'ajouter ou de supprimer dynamiquement un certain style à la balise. Par exemple:
<div data-bind = "css: {background-color: myViewModel.name () == 'lilei'? 'red': 'white'}"> aaaa </div>Si vous ajoutez ou supprimez plusieurs, comment utiliser la liaison CSS
4.10, att
La liaison de l'attribute est principalement utilisée pour ajouter et supprimer un ou plusieurs attributs (y compris les attributs personnalisés) à la balise, et est similaire à CSS.
4.11. Faire un clic
Cliquez sur la liaison signifie ajouter une méthode d'exécution d'événement de clic à l'élément DOM correspondant. Peut être utilisé sur n'importe quel élément.
<div> <input type = "Button" value = "test cliquez liant" data-bind = "cliquez: clickfunc" /> </div> var myViewModel = {clickfunc: function () {alert ($ (event.currentTarget) .Val ());}}; ko.applybindings (myViewModel);event.currentTarget représente l'élément DOM actuellement cliqué. Parfois, pour une simplicité, nous utilisons directement des fonctions anonymes pour se lier, telles que:
<div> <input type = "bouton" value = "test cliquez liant" data-bind = "click: function () {alert ('cliquer');}" /> </ div>Cependant, cette façon d'écrire JS dans HTML rend difficile pour les blogueurs d'accepter, et ils estiment qu'il est relativement gênant à maintenir, surtout lorsque la logique de l'événement cliqueur est un peu compliqué. Par conséquent, s'il n'est pas nécessaire, il n'est pas recommandé d'écrire directement cette fonction anonyme.
4.12. Autres
Pour toutes les liaisons de données de données, vous pouvez voir l'introduction sur le site officiel, et je ne les répertorierai pas ici. Lorsque vous en avez besoin, allez simplement sur le site officiel pour le vérifier. Jetez un œil à toutes les liaisons énumérées sur le site officiel:
5. Transformation et relation entre les objets JSON et les attributs de surveillance
Nous savons que pour éviter les méthodes de présentation directes dans différentes langues, en général, nous utilisons des données de format JSON lors de l'interaction avec le front-end et le back-end. Nous utilisons le modèle de données récupéré à partir de l'arrière-end via les demandes HTTP. Pour utiliser certaines des fonctionnalités de nos KO, nous devons convertir ces modèles de données ordinaires en attributs de surveillance de KO; À l'inverse, nous utilisons les attributs de surveillance de KO, et parfois nous devons convertir ces attributs en données JSON ordinaires et les passer à l'arrière-plan. Alors, comment réaliser cette conversion?
5.1. Convertir l'objet JSON en ViewModel
Par exemple, nous prenons un objet JSON à partir de l'arrière-plan, puis le transformons en notre ViewModel, puis le lions à notre interface DOM.
$ .ajax ({url: "/ home / getData", type: "get", data: {}, succès: function (data, status) {var ojson = data;}});Nous envoyons une demande au backend, prenons un objet JSON, attribuons une valeur à OJSON, puis nous convertissons l'Ojson en ViewModel. Le moyen le plus intuitif est de le convertir manuellement. Par exemple, nous pouvons le faire:
var myViewModeljson = {deptName: ko.oBservable (), deptlevel: ko.observable (), DeptDesc: ko.observable ()}; ko.applybindings (myViewModeljson);Puis dans le succès demandé par Ajax
Success: Function (Data, Status) {var ojson = data; MyViewModeljson.deptName (ojson.deptName); MyViewModeljson.Deptlevel (ojson.deptDevel); MyViewModeljson.DeptDesc (Ojson.DeptDeSC);};De cette façon, grâce à la liaison manuelle, la liaison de l'objet JSON au ViewModel est réalisée. L'avantage de cela est la flexibilité, l'inconvénient est évident, la quantité de code manuel est trop grande.
Heureusement, avec notre open source universelle, il y a toujours des gens qui trouvent une meilleure façon. Nous pouvons utiliser le composant knockout.mapping pour nous aider à convertir l'objet JSON de l'interface en ViewModel.
knockout.mapping Adresse open source: télécharger
Jetons un bref aperçu de la façon dont il est utilisé, ou de l'exemple ci-dessus. Nous n'avons pas besoin de mettre en œuvre la définition d'aucune vue ViewModel. Tout d'abord, nous devons nous référer à knockout.mapping.js
<script src = "~ / scripts / knockout / knockout-3.4.0.min.js"> </ script> <script src = "~ / scripts / knockout / extensions / knockout.mapping-latest.js"> </ script>
Remarque: Here knock.mapping-lastest.js doit être placé derrière le knockout-3.4.0.min.js, sinon ko.mapping ne peut pas être appelé.
Puis utilisez-le directement dans la fonction de réussite
Succès: fonction (data, status) {var myViewModeljson2 = ko.mapping.fromjs (data); ko.applybindings (myViewModeljson2);}Voyons l'effet:
Doute de code: l'objet JSON récupéré de l'arrière-plan via la demande AJAX est commodément converti en vue ViewModel via ko.mapping.fromjs (). N'est-ce pas tranchant? Bien sûr, en plus de cette utilisation, vous pouvez également mettre à jour le ViewModel existant et l'utiliser comme suit:
var myViewModeljson = {deptname: ko.observable (), deptlevel: ko.observable (), deptDesc: ko.observable ()}; ko.applybindings (myViewModeljson); $ (function () {$ .ajax ({url: "/ home / getData", Type: "get", {}, ",", home / getData ", Type:" Get ", {},", ",", ",", {url: "/ home / getData", Type: "Get", {}, ",", ",", {URL: "/ Home / GetData", Tyth function (data, status) {ko.mapping.fromjs (data, myViewModeljson)}});});Dans le succès, mettez à jour le ViewModel de MyViewModeljson en fonction de la valeur des données.
5.2. Convertir ViewModel en objet JSON
Ce qui précède a mentionné que les objets JSON sont convertis dans ViewModel, alors que devons-nous faire si nous devons convertir le ViewModel en objets JSON et le passer au backend?
Il y a deux méthodes fournies lors du knock-out:
• ko.tojs (): convertir ViewModel à l'objet JSON
• ko.tojson (): convertir ViewModel en chaîne JSON sérialisée.
Par exemple, notre code est le suivant:
$ (function () {var ojson1 = ko.tojs (myViewModeljson); var ojson2 = ko.tojson (myViewModeljson);}); var MyViewModeljson = {deptname: ko.observable ("r & d Depadep KO.Observable ("Group de développement")}; KO.ApplyBindings (MyViewModeljson);Alors surveillons les valeurs d'Ojson1 et d'Ojson2:
Doute du code: à travers l'image ci-dessus, il est facile de comprendre la différence entre les deux méthodes. Il convient de noter ici que ces deux méthodes sont intégrées à KO et ne nécessitent pas le support du composant de mappage.
6. Créez votre propre attribut de données de données
J'ai parlé tellement ci-dessus, et je présenterai une certaine liaison et surveillance lors de KO. Ainsi, parfois, nous devons personnaliser notre discours de données, tel que: <étiqueter data-bind = "Mybind: name"> </ label>. Cette exigence est particulièrement utile lors de l'encapsulation des composants. Peut-il être mis en œuvre? bien sûr.
Dans KO, la propriété KO.BindingHandlers est fournie pour personnaliser la propriété Data-Bind. Sa syntaxe est la suivante:
ko.bindinghandlers.mySelect = {init: function (élément, valaleaccessor, AllBindingsAccessor, ViewModel) {}, update: function (élément, valaccessor, AllBindingsAccessor, ViewModel) {}};Déclarez-le simplement comme celui-ci, puis vous pouvez utiliser le contrat de données personnalisé dans notre balise HTML.
<div> <sélectionnez Data-Bind = "MySelect: $ root"> <option id = "1"> département R&D </ Option> <option id = "2"> Département des affaires humaines </ Option> <option id = "3"> Département administratif </opoption> </lect> </div>
MySelect est notre propriété de liaison personnalisée. $ root peut être compris comme l'initialisation pour le moment (bien que cette explication ne soit pas rigoureuse, s'il y a une explication plus raisonnable, n'hésitez pas à la corriger).
Doute de code: Le KO.BindingHandlers ci-dessus peut être utilisé pour implémenter simplement les propriétés de liaison personnalisées. Deux points doivent être expliqués:
• init, comme son nom l'indique, initialise la liaison personnalisée. Il contient plusieurs paramètres. Les deux premiers paramètres sont généralement utilisés plus souvent. Le premier paramètre représente l'élément DOM qui initialise la liaison personnalisée, et le deuxième paramètre est généralement utilisé pour passer les paramètres initialisés.
• Mettre à jour, mettre à jour le rappel, lorsque l'attribut de surveillance correspondant modifie, cette méthode sera entrée. Si aucun rappel n'est requis, cette méthode peut être non déclaré.
Ici, le blogueur expliquera brièvement l'utilisation de liaisons personnalisées basées sur un mutiselect de composant déroulant qu'il avait partagé.
6.1. Le mutiselect le plus simple
D'une manière générale, si nous devons utiliser KO pour encapsuler certains composants généraux, nous devons utiliser nos Ko.BindingHandlers. Le blogueur discutera de la façon de l'utiliser en combinaison avec le composant mutiselect.
Déclarez d'abord les KO.bindingHandlers personnalisés et initialisez notre balise de sélection dans la méthode init
ko.bindinghandlers.mySelect = {init: function (élément, valaleaccessor, allbindingsAccessor, ViewModel) {$ (élément) .Multiselect ();}, update: function (élément, valaccessor, allbindingsAccessor, ViewModel) {}};Puis utilisez-le dans la balise de la page
<div style = "Text-Align: Center;"> <sélectionner Data-Bind = "MySelect: $ root"> <option id = "1"> R&D Department </ Option> <option id = "2"> Département des affaires humaines </ Option> <option id = "3"> Département administratif </ Option> </ SELECT> </ Div>
La dernière troisième partie, activez la liaison
$ (function () {var multiselect = {}; ko.applybindings (multiselect);});Si vous n'avez pas besoin de passer des paramètres, vous n'avez qu'à lier un ViewModel vide. Certaines personnes sont perplexes, mais la troisième partie ne pense pas que ce soit pratique. La compréhension du blogueur est que l'élément DOM doit utiliser les données de données pour lier les données, et la liaison KO doit être activée, qui est KO.ApplyBindings () ici.
Obtenez l'effet:
6.2. Passage des paramètres
La première étape consiste à personnaliser KO.BindingHandlers
ko.bindinghandlers.mySelect = {init: function (élément, valaleaccess, AllBindingsAccessor, ViewModel) {var oparam = ValueAccessor (); $ (élément) .multiselect (oparam);}, update: function (élément, valideaccessLa deuxième étape est la même que ci-dessus, utilisez cette liaison personnalisée dans la balise HTML.
Étape 3: Passez des paramètres lorsque vous activez la liaison
$ (function () {var multiseLECT = {pertiableClickableOptGroups: true, // Grouping Grouping OnChange: function (option, vérifié) {alert ("select change");}}; ko.applybindings (multiselect);});Grâce à ces trois étapes, vous pouvez transmettre les paramètres à l'initialisation de notre mutiselect:
Requêtes de code: le deuxième paramètre de l'événement init, nous avons dit, sa fonction principale est d'obtenir les paramètres transmis à partir de notre ViewModel, mais ici, nous devons l'utiliser comme méthode. Pourquoi est-ce que cela reste tant à étudier!
2. Le premier exemple d'ajout, de supprimer, de modifier et de rechercher
À ce stade, les choses de base ont finalement été présentées. À l'origine, j'avais prévu de les terminer dans un article, mais je ne m'attendais pas à ce que les choses de base soient tellement élargies! Les exemples d'ajout, de suppression, de modification et de vérification sont inclus dans le prochain article. Bootstraptable et knockoutjs se combinent pour réaliser la fonction d'ajout, de supprimer, de modifier et de vérifier [2]. Bienvenue pour apprendre et communiquer, et bien sûr, vous êtes également invités à le recommander!