meteor dynamic_modal

Dynamisches Modal-Popup

Problem

Die "edit employee" Funktionalität soll bei Klick auf ein bestimmtes Objekt ein modales Fenster erscheinen lassen in dem der Mitarbeiter editiert werden kann. Da das Modal jedoch bereits beim laden der Seite statisch gerendert wird, muss hier eine reaktive Abhängigkeit geschaffen werden. Je nachdem welcher Mitarbeiter angeklickt wird, soll sich das Formular mit den entsprechenden Daten befüllen.

Lösung

1. Setzen einer Session-Variable

Bei Klick auf den Edit - Button eines Employees wird eine Session Variable mit dem Objekt selber gesetzt.

'click .employeeEditButton': function() {
    // set Session attribute that stores the selected employee
    Session.set('employees.employeeToEdit', this);
    // show modal
    $('#editEmployeeModal').modal('show');
}

2. Bereitstellen einer Datenquelle am Template

Dort wo das Modal liegt (also in diesem Fall am Template employees) muss eine Datenquelle erzeugt werden, welche dynamisch auf die Sessionvariable reagiert.

Template.employees.helpers({
    employees: function() {
        return Employees.find();
    },
    editEmployee: function() {
        return Session.get('employees.employeeToEdit');
    }
});

METEOR MAGIC: Die erzeugte Datenquelle ist ebenfalls reaktiv. Wenn sich die Session-Variable ändert, aktualisiert sich die Datenquelle.

3. Einbinden des Input Templates

An der entsprechenden Stelle wird nun innerhalb von employees.html das Template mit den Inputfeldern eingefügt und mit der Datenquelle verdrahtet.

{{> employeeInput editEmployee}}

4. entfernen der Sessionvariable nach Abschluss

Beim Schließen des Modals muss die Session-Variable wieder entfernt werden.

Template.employees.rendered = function(){
    $('#editEmployeeModal').on('hide.bs.modal', function (e) {
        /*
        clear session variable when dialog is hiding.
        i´m not really shure why this is neccessary,
        but leaving it set causes data display errors (empty fields...)
        */
        Session.set('employees.employeeToEdit', null);
    });
};

Ich verstehe allerdings noch nicht wirklich warum das notwendig ist... Wenn man es nicht tut, werden z.B. beim erneuten Aufrufen des selben Dialoges nach Abbruch keine Daten mehr angezeigt.

Verbesserungsvorschläge

• statt das komplette Objekt in die Session-Variable zu legen, könnte man nur die ID ablegen und die Datenquelle entsprechend anpassen