Share
Bienvenue dans la deuxième partie de l’utilisation de Backbone dans l’administrateur de WordPress. Dans la première partie, nous avons mis en place le "back-end" de notre plug-in, et dans la seconde partie, nous allons terminer en ajoutant notre fonctionnalité "côté client" ou "front-end". Pour un aperçu de ce que nous construisons dans ce tutoriel, ainsi que de notre structure de dossiers et de nos fichiers, veuillez consulter la première partie..
Dans le src dossier, créez-en un autre appelé Modèles et un fichier à l'intérieur de celui-ci appelé metabox.templ.php. C’est là que nous mettrons le code HTML nécessaire à notre méta-boîte. C'est également une excellente occasion de générer les données JSON nécessaires à nos réponses..
Vos dossiers et fichiers devraient maintenant ressembler à ceci.
Jetons un autre regard sur ce que nous créons. Vous pouvez considérer chaque réponse comme un Modèle des données et parce que nous allons utiliser des modèles côté client pour générer un vue pour chacun, cette vue peut réagir aux modifications apportées au modèle. Cela nous permet d’être très spécifiques lorsque nous lions des événements à l’interface utilisateur et conduit naturellement à un flux de travail plus simple - une fois que vous avez compris ce qui se passe, c’est.
À l'intérieur de notre nouvelle création metabox.templ.php, C'est le modèle que nous allons utiliser pour chacun de nos modèles. Vous pouvez voir que nous encapsulons du code HTML dans une balise de script. Nous donnons à la balise de script l'attribut type = "text / template" afin que le navigateur ne le rend pas à la page. Ce petit morceau de HTML doit être utilisé ultérieurement pour générer le balisage nécessaire à chaque vue. Nous utiliserons les fonctionnalités de modèle intégrées de Underscore pour que les valeurs soient ainsi emballées. sera remplacé plus tard par les données de nos modèles.
Toujours à l'intérieur de src / templates / metabox.templ.php - Ici, nous ne faisons que définir les conteneurs qui seront remplis avec les entrées du modèle ci-dessus. Cela se produit une fois que Backbone a analysé les données JSON nécessaires au modèle. C’est donc tout ce que nous avons à faire ici..
Entrez les réponses ci-dessous
Bonne réponse:
La dernière chose nécessaire à l'intérieur du src / templates / metabox.templ.php fichier, est la donnée JSON qui représente chaque réponse. Ici, nous créons un objet sur l’espace de noms global, puis affectons les valeurs que nous avons transmises via le $ viewData tableau. J'aime également enregistrer les références aux conteneurs que nous utiliserons plus tard afin de ne pas avoir d'identifiant dans deux fichiers séparés..
Ok, si vous en êtes à ce stade, vous avez configuré avec succès votre plugin pour permettre l’utilisation de Backbone.js et votre méta-boîte génère le balisage requis et les données JSON. Il est maintenant temps de tout rassembler et d'utiliser Backbone.js pour organiser notre code côté client. Il est temps de couvrir:
Votre structure de répertoire finale et vos fichiers doivent ressembler à ceci.
Tout d’abord, nous encapsulons tout ce que nous faisons dans une fonction immédiatement appelée et nous passerons dans jQuery pour qu’il soit utilisé avec $ signe, je ne vais pas montrer cette enveloppe dans des extraits, alors assurez-vous de tout mettre en dessous.
/ * js / admin.js * / (fonction ($) / ** Notre code ici ** / (jQuery));
Ensuite, nous devons accéder à nos données stockées sur l’espace de noms global et également créer un nouvel objet qui stockera nos objets Backbone..
/ * js / admin.js * / var Quiz = Vues: ; var wpq = window.wpQuiz;
Le modèle représente une réponse unique. Dans son constructeur, nous faisons plusieurs choses.
Accentsconagua
faux ajaxurl variable disponible sur chaque page d’administrateur. Nous ajoutons également le nom de notre méthode qui gère la requête ajaxtoJSON méthode pour ajouter l'ID de la publication en cours à chaque modèle. Cela aurait pu être fait côté serveur, mais je l'ai mis ici pour illustrer comment vous pouvez remplacer ce qui est enregistré sur le serveur (cela peut arriver très pratique, c'est pourquoi je l'ai inclus ici) / * js / admin.js * / Quiz.Model = Backbone.Model.extend (valeurs par défaut: 'correct': false, url: ajaxurl + '? action = save_answer', toJSON: fonction () var attrs = _ .clone (this.attributes); attrs.post_id = wpq.post_id; return attrs;, initialize: function () if (this.get ('answer_id') === wpq.answers.correct) this.set ('correct', true);); Une collection est essentiellement un emballage pour plusieurs modèles et le travail avec ces modèles est un jeu d'enfant. Pour notre petit exemple, nous ne modifierons pas la collection, sauf spécifier le modèle à utiliser..
/ * js / admin.js * / Quiz.Collection = Backbone.Collection.extend (model: Quiz.Model);
Notre première vue peut être considérée comme un wrapper pour les champs d’entrée individuels. Nous n'avons pas besoin de déclarer un modèle ou l'élément HTML que nous voulons que Backbone crée pour nous dans ce cas, car plus tard, lorsque nous instancierons cette vue, nous lui transmettrons l'ID d'un div que nous avons créé dans le fichier meta box. Backbone utilisera alors simplement cet élément comme conteneur. Cette vue prendra une collection et pour chaque modèle de cette collection, elle créera une nouvelle contribution élément et l'ajouter à lui-même.
/ * js / admin.js * / Quiz.Views.Inputs = Backbone.View.extend (initialize: function () this.collection.each (this.addInput, this);, addInput: function (modèle, index ) var input = new Quiz.Views.Input (model: model); this. $ el.append (input.render (). el););
Cette vue suivante représente un modèle unique. Dans l’intérêt de montrer le type de choses que vous pouvez faire en codant JavaScript de cette façon, j’ai essayé de vous fournir différentes techniques d’interaction et de montrer comment réagir à celles de Backbone..
Notez que nous spécifions un 'tagName'ici avec un modèle. Dans notre cas, cela va saisir le modèle que nous avons vu précédemment, l’analyser en utilisant les données du modèle, puis envelopper tout dans un p tag (ce qui nous laissera un peu de marge autour de chacun).
Notez également comment les événements sont liés aux éléments d'une vue. Beaucoup plus propre que votre callback jQuery moyen, et ce qui est encore mieux, c’est la possibilité d’utiliser un sélecteur jQuery comme celui-ci. this. $ ('input') dans nos vues sachant qu'ils sont automatiquement englobés dans la vue. Cela signifie que jQuery n’examine pas l’ensemble du DOM lorsqu’il tente de faire correspondre un sélecteur..
Dans cette vue, nous pourrons:
/ * js / admin.js * / Quiz.Views.Input = Backbone.View.extend (tagName: 'p', // Extrait le modèle du modèle DOM: _. template ($ (wpq.inputTempl) .html. ()), // Lorsqu'un modèle est enregistré, ramenez le bouton à l'état désactivé initialize: function () var _this = this; this.model.on ('sync', function () _this. $ (' ') .text (' Save ') .attr (' disabled ', true););, // Attacher des événements aux événements: ' Entrée keyup ':' Flou ',' Entrée flou ':' Flou ',' Cliquez sur le bouton ':' enregistrer ', // exécuter la sauvegarde: fonction (e) e.preventDefault (); $ (e.target) .text (' wait '); this.model.save (); , // Met à jour les attributs du modèle avec les données du champ de saisie flou: function () var input = this. $ ('Input'). Val (); if (input! == this.model.get ('answer' )) this.model.set ('answer', input); this. $ ('button'). attr ('disabled', false);, // Rendez l'entrée unique - incluez un index. render: function () this.model.set ('index', this.model.collection.indexOf (this.model) + 1); this. $ el.html (this.template (this.model.toJSON ())); retournez ceci; ); Cet élément de sélection est l'endroit où l'utilisateur peut choisir la bonne réponse. Lorsque cette vue est instanciée, elle reçoit la même collection de modèles que le wrapper de l'entrée. Cela vous sera utile plus tard, car nous pourrons écouter les modifications apportées au modèle dans les champs de saisie et mettre à jour automatiquement les valeurs correspondantes dans cet élément de sélection..
/ * js / admin.js * / Quiz.Views.Select = Backbone.View.extend (initialize: function () this.collection.each (this.addOption, this);, addOption: function (modèle) var option = new Quiz.Views.Option (model: model); this. $ el.append (option.render (). el););
Notre vue finale créera un élément d'option pour chaque modèle et sera ajoutée à l'élément de sélection ci-dessus. Cette fois, j'ai montré comment définir dynamiquement des attributs sur l'élément en renvoyant un hachage à partir d'une fonction de rappel affectée à la propriété d'attributs. Notez également que dans le initialiser() méthode, nous nous sommes 'abonnés' pour modifier les événements du modèle (en particulier, réponse attribut). Cela signifie fondamentalement: chaque fois que ce modèle est réponse attribut est changé, appelez le rendre() méthode (qui dans ce cas, va simplement mettre à jour le texte). Ce concept de "souscription" ou d '"écoute" aux événements qui se produisent dans un modèle est vraiment ce qui rend Backbone.js et les nombreuses autres bibliothèques similaires, si puissant, utile et agréable à utiliser..
/ * js / admin.js * / Quiz.Views.Option = Backbone.View.extend (tagName: 'option', // le renvoi d'un hachage nous permet de définir des attributs de manière dynamique: function () return 'valeur' : this.model.get ('answer_id'), 'selected': this.model.get ('correct'), // Surveillez les modifications apportées à chaque modèle (ce qui se produit dans les champs d'entrée et s'affiche à nouveau lorsque est un changement initialize: function () this.model.on ('change: answer', this.render, this);, render: function () this. $ el.text (this.model.get (' répondre ')); renvoyer ceci;); Nous sommes si proches maintenant que tout ce que nous avons à faire est d'instancier une nouvelle collection et de lui transmettre le JSON dont il a besoin, puis d'instancier les deux vues "wrapper" pour l'élément sélectionné et pour les entrées. Notez que nous passons aussi le el propriété à nos points de vue. Ce sont des références aux éléments div et select que nous avons laissés en blanc précédemment dans la boîte méta..
/ * js / admin.js * / var answers = new Quiz.Collection (wpq.answers); var selectElem = new Quiz.Views.Select (collection: answers, el: wpq.answerSelect); var input = new Quiz.Views.Inputs (collection: answers, el: wpq.answerInput);
Si vous avez atteint la fin, vous devriez maintenant avoir un exemple complet de la façon d'intégrer Backbone JS dans un plugin WordPress. Si vous regardez les fichiers sources, vous remarquerez que la quantité de code nécessaire pour incorporer Backbone est relativement petite. Une grande partie du code que nous avons vu ici était le PHP nécessaire au plugin. Travailler avec Backbone quotidiennement au cours des six dernières semaines m’a vraiment apporté un nouveau respect pour l’organisation du code frontal et j’espère que vous pourrez apprécier les avantages qui en découleront..
Au sein de la communauté WordPress, je peux imaginer certains des plugins les plus complexes et de haute qualité qui tirent réellement parti de l’utilisation de Backbone et je suis honoré d’avoir pu partager avec vous une technique permettant de faire exactement cela..
