Dans le premier article d'expérience KnockoutJS Learning (i) KO, il a été mentionné que la méthode de liaison Data-Bind = "xx: OO" dans KO peut non seulement lier le texte, la valeur, etc., mais également lier les attributs visibles, style et autres apparence, cliquez, cliquez en textes et autres événements, et même le flux de programmes de contrôle. Divers paquets de fantaisie satisferont certainement votre fantasme.
Ce qui suit parle brièvement de l'utilisation de diverses liaisons, qui sont principalement divisées en trois types: représentation, processus et interaction selon les propriétés liées.
Attributs de performance
Les attributs de liaison de la classe de présentation incluent Visible, Text, HTML, CSS, Style et ART. À l'exception de la classe que CSS représente CSS, tout le reste est facile à comprendre. Bien sûr, la dénomination dans le style doit être cohérente avec JS, et elle doit être supprimée - changée en dénomination de chameau, comme indiqué ci-dessous:
<! - Html Code -> <div data-bind = "Visible: sobshowMessage"> Vous ne verrez ce message que lorsque le message "SpanShowMessage" détient une vraie valeur. </v> </ span> Profitwarning: currentProfit () <0} "> CSS Class Binding Test </div> <div data-bind =" style: {colore: cssprofit () <0? {SouchoShowMessage: ko.observable (true), // message initialement visiblemMessage: ko.observable (), // initialement blankdetails: ko.observable (), // initialement à vierge pourprofit: ko.obserable (150000), //, donc initialement nous n'appliquons pas le "Profit-warning" ClassCurrentProfit: donc initialement nous n'appliquons pas le "Profit-warning" ClasscurProfit: DO POSITIONN KO.Observable (150000), // Valeur positive, donc initialement BlackUrl: KO.Observable ("END-END.HTML"), URLTITLE: KO.Observable ("Rapport, y compris les statistiques finales de fin d'année")}; KO.ApplyBindings (ViewModel); // applique des liensL'effet est comme ceci:
Comme mentionné dans l'article précédent, en plus des attributs individuels de XXOO, vous pouvez également transmettre des objets JSON, c'est-à-dire que vous pouvez combiner des attributs de liaison, tels que:
<! - Html Code -> <div data-bind = "{Visible: sbshowMessage, text: myMessage, css: {Profitwarning: currentProfit () <0}}"> vous verrez ce message uniqueBien sûr, l'effet est comme ceci:
Le réglage de la classe de présentation est relativement simple. Une chose à noter est que de nombreuses classes de présentation n'ont pas besoin d'être modifiées dynamiquement. À l'heure actuelle, vous pouvez utiliser les paramètres ViewModel pour obtenir une initialisation centralisée des données, mais ne les définissez pas sur des observables, tels que:
// JS Codevar ViewModel = {MagshowMessage: ko.Observable (true), // Message initialement VisiBleMmeMessage: 'Ce texte ne nécessite pas de mise à jour dynamique' // initialement blanc};Attributs de la classe de processus
Les classes de processus incluent ForEach, IF, IFNOT, avec et des liaisons «composants» plus avancées. Si et IFNOT sont similaires à Visible. La différence est: IF supprimera directement les composants correspondants du DOM, tandis que Visible contrôle uniquement l'affichage caché, et les composants sont toujours dans le DOM. avec a le même effet qu'avec JS, qui consiste à étendre la chaîne de portée. En termes simples, il s'agit d'ajouter un «préfixe». avant la variable. Ici, je ne présenterai que ForEach et le composant est placé avec la liaison du modèle.
Consultez le code:
<! - HTML Code -> <p> Tester ForEach Binding </p> <ul Data-Bind = "Foreach: People"> <li> Non. href = "#" data-bind = "cliquez: supprimer"> supprimer </a> </li> </ul> <input type = "bouton" data-bind = "click: addPeople" value = "add" /> var listModel = function () {// définir la valeur du tableau des personnes (les gens sont en fait un tableau de fonction). Utilisez Forach pour traverser l'objet de tableau // UL, Li correspond aux enfants des personnes et des personnes. Par conséquent, lors de la liaison de Li en interne, la portée est dans l'enfant du peuple {nom ...}. Afin d'appeler Supprimer les personnes en dehors des personnes, $ parent est requis // S'il est appelé supprimer en interne, ceci dans la suppression est {nom ...} correspondant à l'élément LI actuel, et la portée est le domaine actuel, aucun parent n'est requis. this.people = ko.obServableArray ([{name: "mark zake", supprimer: function () {that.people.remove (this); // notez l'objet actuel (qui est {name ...}) et scope. {That.people.Remove (this);}}, {name: "Green Deny", retire: function () {that.people.remove (this);}}]); // adpeople appelle la méthode du même niveau de personnes en interne. Cela changera, et cela devrait être enregistré à l'avance et transmis. Ce que vous souhaitez exécuter est listModel.people.remove (a.parent) this.removepeople = function () {that.people.remove (this);}}; ko.applybindings (new ListModel ());Ce qui est plus facile à jouer ici, c'est la correspondance hiérarchique entre le nœud Dom et le ViewModel. Premièrement, appliquez la liaison pour la liaison sur UL, c'est-à-dire que chaque Li correspond à chaque enfant. Après cela, vous pouvez le comprendre en fonction des règles de portée de JS. En parlant de portée, je dois le mentionner. Comme le dit le proverbe, je traite cela comme si j'étais mon premier amour, et cela m'a trompé des milliers de fois. Ici, Xiaojia a ajouté une fonction de suppression à la version officielle, ce qui est simple à correspondre au RemovePeople officiel. Quant aux variables telles que $ index et $ parent, comprenez-les littéralement.
Attributs de classe d'interaction
Enfin, il est temps d'obtenir le point. La raison la plus importante de l'utilisation de KO est de faire face au problème de présentation interactif interactif dynamique. Ici, nous présenterons quelques liaisons liées aux formulaires.
(1) Cliquez sur la liaison
Syntaxe: Data-Bind = "Click: ClickHandler". La fonction ClickHandler ici peut être n'importe quelle fonction, pas nécessairement une fonction dans ViewModel, tant qu'elle peut être référencée. Il y a quelques éléments à noter sur l'événement de clic:
1. Passage de paramètre, KO passe le composant actuel comme le premier paramètre à la fonction ClickHandler par défaut. Faites attention au contexte contraignant actuel ici. Par exemple, dans l'environnement avec un environnement, le composant retourné deviendra le composant avec le composant actuel que vous souhaitez. Si vous devez également passer le paramètre de l'événement, passez l'événement comme deuxième paramètre. Si vous devez transmettre plus de paramètres, vous devez l'envelopper avec une fonction. comme:
<Button Data-Bind = "Click: fonction (données, événement) {myFunction ('param1', 'param2', données, événement)}"> Cliquez sur moi </ / bouton>2. Paramètres de comportement par défaut (tels que les liens)
KO est interdit par défaut, et nous lions généralement les événements de clic pour les liens et ne les laisserons pas sauter. Cependant, si vous devez l'activer, renvoyez-vous vrai dans ClickHandler.
3. Bubble
KO est autorisé à bouillonner par défaut. Vous pouvez définir l'événement Click sur Not Bubble par Data-Bind = "Click: clickhandler, clickbubble: false".
(2) Liaison des événements
KO fournit cette interface aux utilisateurs pour personnaliser les événements de liaison. En ce qui concerne le passage des paramètres, le comportement par défaut, le bouillonnement, etc., le même que la liaison de clic, le cas d'utilisation:
<div> <div data-bind = "Event: {MouseOver: ENableDeTails, Mouseout: DisabledEtails}"> Mouse Over Me </div> <div data-bind = "Visible: Detailsenabled"> Détails </v> </div> <Script Type = "Text / Javascrip {this.detailSenabled (true);}, DisabledEtails: function () {this.detailSenabled (false);}}; ko.applybindings (ViewModel); </ script>(3) soumettre une contrainte
Il est principalement utilisé pour effectuer un travail de vérification. KO bloquera l'action du formulaire de soumission par défaut et le transfert vers la fonction de soumission. Lorsque vous devez vous soumettre à l'avenir, revenez vrai dans l'événement contraignant.
PS: Pourquoi ne pas utiliser les événements de clics dans le formulaire pour le gérer? Étant donné que la soumission est à l'origine conçue pour gérer les événements de soumission, il peut également accepter des actions de soumission telles que le retour du chariot, mais le clic ne peut pas.
(4) La valeur est liée à TextInput
La valeur de liaison et le TextInput dans la zone d'entrée sont similaires, mais il est plus recommandé d'utiliser l'événement TextInput pour la liaison, car TextInput est un nouveau spécifiquement utilisé pour gérer les événements d'entrée. Comme vous pouvez le voir dans l'article précédent, lors de l'utilisation de l'entrée de liaison de valeur (gauche), l'objectif doit être déplacé hors de la zone d'entrée avant qu'il ne soit mis à jour, tandis que TextInput (à droite) est mis à jour immédiatement.
Bien que la liaison de valeur puisse également obtenir le même effet que TextInput en définissant Data-Bind = "{Value: Price, ValueUpdate: 'AfterKeyDown'}", cela n'est pas aussi compatible avec TextInput dans le navigateur.
(5) Liaison des options (SelectOptions)
Dans la liste déroulante, les options peuvent être utilisées pour lier la valeur de l'enfant. L'enfant peut être une chaîne ou un objet JS. L'article précédent ([KOCKOutJS Learning Experience Journey] (1) KO First Experience) montre des cordes, et cette fois je transmerai un objet:
Code:
<p> Votre pays: <sélectionnez Data-Bind = "Options: DisponableCountries, OptionSText: 'CountryName', Valeur: SelectedCountry, OptionScaption: 'Choisissez ...' '"> </lect> </p> <div Data-Bind = "Visible: SelectedCountry"> <! - Apparaît lorsque vous sélectionnez quelque chose -> Vous avez choisi un pays avec une population <span Data-Bind = " selectedCountry (). countrypopulation: 'inconnu' "> </span>. </div> <script type =" text / javascrip Pays ("UK", 65000000), New Country ("USA", 320000000), New Country ("Suède", 29000000)]), SelectedCountry: ko.observable () // rien sélectionné par défaut}; KO.ApplyBindings (ViewModel); </cript>Voici une option pour lier l'option de la zone de liste et une valeur est utilisée pour lier l'élément sélectionné. Étant donné que les options sont des objets JS, vous devez utiliser un OptionText pour spécifier l'affichage dans la zone de liste. OptionCaption fait référence à la valeur d'affichage par défaut lorsqu'aucun élément n'est sélectionné. Si nous définissons une zone de liste multi-sélects, nous ne pouvons pas utiliser la valeur pour lier les éléments sélectionnés. À l'heure actuelle, SelectOptions doit être utilisée pour lier les éléments sélectionnés.
(6) Autres liaisons: Activer / désactiver, Hasfocus, vérifié, UniqueName.
Ces événements sont très simples à utiliser, donc je ne les présenterai pas en détail. Le dernier UniqueName est utilisé pour définir l'attribut de nom unique du contrôle de formulaire. Lorsque le formulaire est soumis à l'arrière-plan, il ne sera pas soumis à l'arrière-plan sans définir la valeur de l'attribut de nom, il existe donc une telle fonction de liaison. Il y a un autre effet relativement courant sur Hasfoucus sur le site officiel:
Nom:
Nom: Bert Bertington
Cliquez sur le nom pour le modifier; Cliquez ailleurs pour appliquer les modifications.
Cliquer sur le nom ci-dessus peut devenir modifiable, puis perdre la focalisation, puis devenir un texte ordinaire. Cet effet est assez simple à mettre en œuvre avec KO.
Résumer
Cet article présente principalement les méthodes d'utilisation de diverses liaisons dans knockoutjs . En utilisant la combinaison de ces méthodes de liaison, vous pouvez simplement créer une page d'interface utilisateur qui nécessite des interactions plus dynamiques. La chose la plus importante à utiliser ces méthodes est de se rappeler que toutes les liaisons sont des objets de fonction, vous pouvez donc fonctionner directement dans HTML, afin que la structure du code JS puisse parfois être plus simple.
Tutoriel officiel: http://knockoutjs.com/documentation/introduction.html