web-dev-qa-db-fra.com

Utilisation du guidon avec colonne vertébrale

J'apprends Backbone/Handlebars/Require. J'ai regardé partout en ligne et sur SO - existe-t-il des didacticiels ou des sites Web auxquels vous pouvez m'adresser et qui pourraient fournir des informations utiles sur l'utilisation du guidon au lieu du soulignement?

backbone.jsrequirejshandlebars.js
47
Joseph at SwiftOtter

L'utilisation de handlebars.js au lieu de l'utilisation de modèles de soulignement est assez simple. Découvrez cet exemple:

https://cdnjs.com/libraries/backbone.js/tutorials/what-is-a-view (passez à la section "Chargement d'un modèle")

SearchView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        // Compile the template using underscore
        var template = _.template( $("#search_template").html(), {} );
        // Load the compiled HTML into the Backbone "el"
        this.el.html( template );
    }
});

Fondamentalement, la convention dans Backbone est de construire votre HTML dans une fonction de rendu. L’utilisation du moteur de gabarit est laissée à vous (ce que j’aime à propos de Backbone). Donc, vous voudriez simplement le changer en ...

SearchView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        // Compile the template using Handlebars
        var template = Handlebars.compile( $("#search_template").html() );
        // Load the compiled HTML into the Backbone "el"
        this.el.html( template );
    }
});

Puisque vous utilisez require.js, vous pouvez faire du guidon une dépendance en haut de votre module. Je suis assez novice dans ce domaine, mais il semblerait que l'apprentissage du ciblage s'appuie sur l'utilisation des modèles Backbone.js et de require.js.

78
SimplGy

Je préférerais compiler le modèle une fois (pendant l’initialisation), afin d’éviter de le recompiler à chaque rendu. En outre, vous devez transmettre le modèle au modèle compilé afin de générer le code HTML:

SearchView = Backbone.View.extend({
  initialize: function(){
    // Compile the template just once
    this.template = Handlebars.compile($("#search_template").html());
    this.render();
  },
  render: function(){
    // Render the HTML from the template
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});
2
satanas

Si vous utilisez require.js, vous ne pourrez pas utiliser le fichier Handlebars actuel. J'ai utilisé le plugin Handlebars suivant et il semble être mis à jour avec la version actuelle. Il suffit de remplacer votre fichier Handlebars par le plug-in ci-dessus si Handlebars renvoie null dans votre module. 

1
TYRONEMICHAEL
define(["app", "handlebars",
    "text!apps/templates/menu.tpl"
], function (app, Handlebars, template) {

    return {
        index: Marionette.ItemView.extend({
            template: Handlebars.compile(template),
            events: {
                'click .admin-menu-ref': 'goToMenuItem'
            },
            goToMenuItem: function (e) {
               //......
            }
        })
    }
});


 new view.index({model: models});
0
zloctb