Marionette.js behaviours

Marionette.js è un libreria javascript che estende il framework Backbone.js. Quest’ultimo è un framework JS basato sul paradigma di programmazione Model View Controlloer (MVC) con un approccio minimale.
Una delle features più interessanti di Marionette sono i Behaviors.

Tramite i Behaviors è possibile raggruppare una serie di atteggiamenti condivisi da più View, nell’esempio di seguito ne creeremo uno per rendere le nostre View modali.
Per realizzare la nostra interfaccia grafica faremo uso di MaterializeCss ed in particolare della sua implementazione per i dialoghi modali.

Attenzione: il codice che segue è scritto in Typescript

export class ModalBehavior extends Marionette.Behavior {

    options = {
        autoOpen: true,
        dismissible: true, // Modal can be dismissed by clicking outside of the modal
        opacity: .5, // Opacity of modal background
        inDuration: 300, // Transition in duration
        outDuration: 200, // Transition out duration
        startingTop: '4%', // Starting top style attribute
        endingTop: '10%', // Ending top style attribute
        ready: () => {
            this.view.triggerMethod('modal:ready');
        },
        complete: () => {
            this.view.triggerMethod('modal:complete');
            this.destroy();
            this.$modalEl.remove();
        }
    };

    $modalEl: JQuery;

    onRender() {

        this.$modalEl = $('<div><div class="modal-content">').addClass('modal');
        $('.modal-content', this.$modalEl).append(this.$el);
        $('body').append(this.$modalEl);

        this.$modalEl.modal({
            dismissible: this.getOption('dismissible'),
            opacity: this.getOption('opacity'),
            inDuration: this.getOption('inDuration'),
            outDuration: this.getOption('outDuration'),
            startingTop: this.getOption('startingTop'),
            endingTop: this.getOption('endingTop'),
            ready: this.getOption('ready'),
            complete: this.getOption('complete'),
        });

        if (this.getOption('autoOpen')) {
            this.modalOpen();
        }

    }

    modalOpen() {
        this.$modalEl.modal('open');

    }

    modalClose() {
        this.$modalEl.modal('close');
    }

    onBeforeDestroy(){
        this.$modalEl.modal('close');
    }
}

In questo modo avremo una View che si renderizzerà all’interno di un dialogo semplicemente definendola come segue:

export  default class ModalView extends Marionette.View {
    private template = Handlebars.compile(template);

    constructor(activity?: Activity){
        super({
            behaviors: [ModalBehavior],
        });
    }
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *