webentwicklung-frage-antwort-db.com.de

Verwenden von Lenkern mit Backbone

Ich lerne Backbone/Lenker/Require. Ich habe überall im Internet und unter SO nachgesehen. Gibt es Tutorials oder Websites, auf die Sie mich weiterleiten können, die hilfreiche Informationen für die Verwendung des Lenkers anstelle von Unterstrich liefern?

47

Die Verwendung von handlebars.js anstelle des Unterstreichens von Templates ist ziemlich unkompliziert. Schauen Sie sich dieses Beispiel an:

https://cdnjs.com/libraries/backbone.js/tutorials/what-is-a-view (blättern Sie zum Abschnitt "Laden einer Vorlage")

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 );
    }
});

Grundsätzlich besteht die Konvention im Backbone darin, Ihre HTML-Datei in einer Renderfunktion zu erstellen. Die Verwendung der Templating Engine bleibt Ihnen völlig überlassen (was mir an Backbone gefällt). Sie würden es also einfach ändern in ...

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 );
    }
});

Da Sie requir.js verwenden, können Sie Handlebars zu einer Abhängigkeit am oberen Rand Ihres Moduls machen. Ich bin ziemlich neu in diesem Bereich, aber es klingt wie das Erlernen des Fokus auf Backbone.js-Muster und die Verwendung von.

78
SimplGy

Ich würde es vorziehen, die Vorlage einmal zu kompilieren (während der Initialisierung), um zu vermeiden, dass die Vorlage bei jedem Rendern neu kompiliert wird. Außerdem müssen Sie das Modell an die kompilierte Vorlage übergeben, um den HTML-Code zu generieren:

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

Wenn Sie request.js verwenden, können Sie die aktuelle Handlebars-Datei nicht verwenden. Ich habe das folgende Lenker-Plugin verwendet und scheint mit der aktuellen Version auf dem Laufenden zu sein. Ersetzen Sie einfach Ihre Handlebars-Datei durch das obige Plugin, wenn Handlebars in Ihrem Modul null zurückgibt. 

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