Exemple de liaison des données au DOM

Question

J'ai lu ce qui suit dans Backbone.js ' page :

Lorsque l'on travaille sur une application web qui implique beaucoup de JavaScript, l'une des premières choses que l'on apprend, c'est d'arrêter de t DOM. Il est trop facile de créer des ap comme des piles enchevêtrées de sélecteurs et de callbacks jQuery, qui tentent tous de s'intégrer dans le DOM. de garder les données synchronisées entre l'interface HTML, votre logique JavaScript et votre et la base de données de votre serveur. Pour les une approche plus structurée est souvent utile.

Je ne suis pas sûr de bien comprendre le passage ci-dessus (je ne suis pas sûr non plus de bien comprendre la nécessité d'utiliser Backbone.js).

Quelqu'un peut-il me donner un exemple de données liées au DOM et comment Backbone.js le résout ?

EDITAR:

S'agit-il d'un exemple ?

jQuery(document).ready(function($) {
  // Header
  jQuery('#header #searchbox').attr('placeholder', '<?php echo pll__("Header Search Field"); ?>');

(etc...)

(C'est un hack que j'ai utilisé car je ne savais pas comment faire avec php).

Ainsi, si je modifie l'ID de #searchbox ou déplacer sa position, le code ne fonctionnera plus. Est-ce que c'est à cela que le passage ci-dessus fait référence ?

Answer 1

Je viens de faire quelque chose en utilisant backbone qui affiche une boîte d'édition modale, où vous pouvez modifier le nom d'un projet. Comme ce nom est également affiché sur la page principale, je veux le mettre à jour en même temps. Mais je ne veux pas identifier l'élément DOM et le mettre à jour directement avec le résultat de mon édition. Au lieu de cela, je crée un modèle de base :

this.newModel = new app.Project({model: this.model});

J'écoute ensuite le nouveau modèle pour vérifier s'il y a des changements, dans ce cas pour l'attribut project_name :

this.listenTo(this.newModel, 'change:project_name', this.updateName);

Je crée ensuite une nouvelle vue en utilisant le "newModel

modal = new app.ProjectModal({
            model: this.newModel,
        });

Celui-ci est ensuite affiché et si le nom change dans la vue modale, la fonction "this.updateName" est déclenchée dans la vue "parent", ce qui supprime tout besoin d'identifier l'emplacement de l'élément DOM réel.

L'ensemble de la fonction "parent" se présente comme suit :

    app.ProjectCardView = Backbone.View.extend({

        tagName: 'article',
        className: 'project',

        template: _.template( $("#tpl-project-card-summary").html() ),

        events: {
            'click .settings-btn': 'showProjectModal'
        },

        initialize: function() {

            //a slightly different model is used to populate project than this card...
            this.newModel = new app.Project({model: this.model});
            return this;
        },

        render: function() {

            this.$el.html( this.template(this.model.toJSON()) );
            return this;
        },

        showProjectModal: function (e) {

            this.listenTo(this.newModel, 'change:project_name', this.updateName);

                this.modal = new app.ProjectModal({
                    model: this.newModel
                });
                return this;

        },

        updateName: function() {

            if (this.modal) {
                this.$el.find('.item_name').text(this.model.get("project_name"));
            }

            return this;
        }

    });

Il est évident que je dois mettre à jour le DOM quelque part, mais il est maintenant découplé de l'édition et plus facile à gérer.