2013-02-21 4 views
5

Ich mag eine ganze Sammlung in einer Tabelle anzuzeigen, und das Feld „Namen“ an Ort und Stelle in jeder Zeile machen editierbar mit X-editableWie verwende ich X-editierbare dynamische Felder in einer Meteor-Vorlage?

editierbar kann eine kürzlich hinzugefügt "in der Tabelle zu jedem Namen angebracht wird unter Verwendung von Selektor“Option:

$('#collectionTable').editable({ 
    selector: '.editable-click', 
}); 

// I also need to setup a 'save' callback to update the collection... 

$('a.editable-click').on('save', function(e, params) { 
    console.log('Saved value: ' + params.newValue); 
    // TBD: update the collection 
}); 

Aber ich kann auch nicht davon laufen, bis die Vorlage erfolgt Rendering und der DOM-Knoten zur Verfügung steht, so dass ich dies in dem‚gerendert‘Rückruf der Vorlage.

Das Problem ist, dass jedes Mal, wenn sich die Sammlung ändert, gerendert wird, und dann ein neues bearbeitbares Element an jeden DOM-Knoten sowie an einen anderen Rückruf angehängt wird. Dies bedeutet Speicherlecks und mehrere Rückrufe, wenn ein "Name" gespeichert wird.

Klar mache ich das falsch, aber ich bin mir nicht sicher, wo der richtige Ort ist, editierbare und anzurufen ('Speichern', Funktion())?

Antwort

2

Aufruf bearbeitet werden nach jedem Rendering zuverlässig zu sein scheint (obwohl ich mir vorstellen, Speicherlecks verursachen könnte). Aber wenn Sie möchten Ereignisse binden, wie ‚retten‘, sollten Sie sicher sein, alle bestehenden Veranstaltungen zu lösen, sonst werden Sie verbindlich neu halten Ereignisse speichern bei jedem Rendering:

Template.editableTable.rendered = function() { 

    $('#myParentTable').editable({ 
     selector: '.editable-click' 
    }); 

    $('a.editable-click').unbind('save').on('save', function(e, params) { 
     // Make changes to your collection here. 
    }); 

    }; 

ich mit nur experimentiert Aufruf editierbar auf die erstes Rendering der Vorlage Das hat größtenteils funktioniert, solange Sie sicher waren, dass Sie es erneut aufrufen, wenn die Vorlage jemals zerstört wird (z. B. mithilfe von Routern, die Vorlagen dynamisch erstellen und löschen). Aber es gab einige Randfälle, in denen es nicht zu funktionieren schien, also habe ich zurückgerufen, um nach jedem Rendering nur editierbar aufzurufen.

0

Kannst du dich nicht einfach daran erinnern, ob du bereits editierbare und den Event-Listener eingestellt hast und es nicht tun, wenn du bereits hast?

if (editable) { 
// enable editable and add the save listener 
// ... 
editable = true; 
} 
+0

Es ist ein wenig komplizierter, da editierbare auf jedem DOM-Knoten ausgeführt werden muss. Also müsste ich jeden Knoten durchlaufen und seinen Status überprüfen, bevor er bearbeitbar und aktiv ist ("Speichern"). Das ist eine Lösung; Ich bin mir nicht sicher, ob es das Beste ist. – jpeskin

0

Ich würde einen Kommentar hinterlassen, wenn ich könnte, aber ich habe gerade einen 29rep jetzt. So ein Schmerz. Sowieso.

Ich hatte x-editierbare Arbeiten in Meteor 0.7.2, aber seit dem Upgrade auf 0.8.0 wird es nicht mehr richtig dargestellt. Ich neige dazu, mit einer Reihe von leeren Tags zu enden. Dies ist frustrierend, da die Daten dort vorhanden sind, nur nicht zum Zeitpunkt, zu dem die gerenderte Funktion ausgelöst wird.

Was ist der beste Weg, x-editable jetzt zu verwenden, das gerendert nur einmal feuert und nicht dafür sorgt, dass die Daten dort sind.

Ich verwende den Iron Router und meine Vorlagen sind nicht in einem Block {{#each}} eingebettet, der die grundlegende Lösung für das neue gerenderte Modell zu sein scheint.

Verwandte Themen