Backbone.js und Simplemodal Overlays

Backbone.js kommt nicht mit Bordmitteln für Overlays daher, aber diese lassen sich recht leicht implementieren — sofern man auf ein paar Details achtet.

Meine liebste Overlay/Modal-Library ist Simplemodal – eine sehr kleine Bibliothek, die ohne großen Schnickschnack daher kommt. Tatsächlich kommt sie sogar komplett ohne Styles und ist ein wirkliches Fliegengewicht in der Größe.

Der Inhalt des Overlays bekommt seine eigene View

MyApp.OverlayView = Backbone.View.extend({
    template: _.template('<p>Content</p>'),
    events: {},
    render: function() {
        this.$el.html(this.template());
        return this;
    }
});

Eigentlich schon einmal mehr als einfach oder? Nun die View von der aus wir unser Overlay öffnen möchten

MyApp.OtherView = Backbone.View.extend({
    template: _.template('...<a href="#" class="js-open-overlay">Open</a>...'),
    el: '#container',
    events: {
        "click .js-open-overlay", "onClickOpenOverlay"
    },
    initialize: function(options) {
        // ... anderer Instanzierungscode

        _.bindAll(this, "render", "onClickOpenOverlay")
    },
    render: function() {
        this.$el.html(this.template());
        return this;
    },
    // Hier wird unser Overlay schließlich geöffnet
    onClickOpenOverlay: function(event) {
        event.preventDefault();
        //Wir instanzieren unsere Overlay-View
        var overlayView = new MyApp.OverlayView();
        //Und weisen die Ausgabe von render() als Inhalt zu
        $.modal(overlayView.render().el);
    }
});

Das war’s :)
Natürlich braucht es noch ein paar nette Styles für das Overlay selbst, aber alle Events — auch im Overlay — sollten »Out of the box« funktionieren.


Ähnliche Artikel

Dein Kommentar:

Sämtliche Html-Tags werden gelöscht, der Kommentar kann mit Textile formatiert werden.
Vor dem Absenden müsst ihr euch einmal die Vorschau ansehen.