Das Problem

Ich arbeite an einer Broschürenansicht für Emberjs und habe einige Probleme. Leaflet ist eine externe Bibliothek und für die Frage etwas irrelevant, aber wissen Sie einfach, dass es sich um eine Zuordnungsbibliothek handelt.

Betrachten Sie eine einfache Eigenschaft wie die Zoomstufe. Instanzen von Leaflet-Maps verfügen über eine Zoomstufe, auf die über zugegriffen werden kannmap.getZoom() und zuweisbar durchmap.setZoom(zoomLevel). Außerdem können Benutzer mit der Karte interagieren und deren Zoomstufe ändern. Leaflet ermöglicht es unseinen Rückruf registrieren wenn sich der Zoom ändert.

Ich möchte, dass meine "Ember-Leaflet" -Ansicht einezoomLevel Glut Eigentum. Auf diese Weise kann ich vom Glutobjektmodell profitieren (bindenzoomLevel zu einer Vorlage oder zu einem anderen Wert, zum Beispiel) und wir machen es "the ember way".

Basislösung

Was ich derzeit habe, ist eine Unterklasse von Ember.View mit einer zoomLevel-Eigenschaft. AufdidInsertElement Ich erstelle die Leaflet-Map-Instanz. Der Code ist kommentiert und sollte selbsterklärend sein.

App.Leaflet = Ember.View.extend({
    classNames : ['ember-leaflet'],

    //default zoom level
    zoomLevel : 13,
    didInsertElement : function() {
        var self = this;
        var zoomLevel = this.get('zoomLevel');

        // create map instance
        var map = L.map(this.$().get(0)).setView(center, zoomLevel);

        // configure map instance...

        // Event listeners
        map.on('zoomend', function(e) {
            self.set('zoomLevel', e.target.getZoom());
        });

        // save map instance
        this.set('map', map);
    }
});

Checkliste

Um diese Frage "beantwortbarer" zu machen, denke ich, dass eine Lösung für dieses Problem die folgenden Anforderungen erfüllen sollte:

Bei der ImmobiliezoomLevel geändert wird, sollte die Karte ihre Zoomstufe entsprechend ändern (mitmap.setZoom(zoomLevel))Wenn der Benutzer den Zoom auf der Karte interaktiv ändert, wird derzoomLevel Eigenschaft sollte geändert werden (wahrscheinlich mit Prospektkarten)zoomend Event Callback)

Beachten Sie, dass wir hier eine Art "zirkuläre Abhängigkeit" haben, d.h.Msgstr "Mach etwas (setZoom auf Karte) wennzoomLevel Änderungen" und"Wenn etwas passiert (Benutzer ändert Zoom), ändernzoomLevel". Ich hätte gerne eine Lösung, die diese zirkulären Beobachterabhängigkeiten vermeidet. GlutnotifyPropertyChange könnte eine Lösung sein.

Dies schien eine ideale Aufgabe fürEmbers berechnete Eigenschaften, aber ich wusste nicht, was ich in die abhängige Eigenschaftszeichenfolge einfügen sollte.zoomLevel ist im Grunde eine Eigenschaft, die von etwas abhängig ist, das keine glühende Eigenschaft ist.

Aktualisieren

Mein erster Versuch war, einen Beobachter zu benutzen, um den Zoom auf die Broschüre zu setzen und ein Ereignis auf die Broschüre zu bindenzoomend zum einstellen derzoomLevel aus meiner sicht.

Problem: Wenn ich zoomLevel für das Ereignis zoomend leaflet einstelle, wird mein Beobachter automatisch erneut ausgelöst. Habe ich mich klar ausgedrückt?

Also, diese Abfolge von Ereignissen passiert:

VeränderungzoomLevel auf interaktiver KarteFlugblatt Feuerzoomend Veranstaltungzoomend Ereignisrückruf setzt GlutzoomLevelBeobachter renntruft unnötigerweise ansetZoom auf dem Flugblatt

Dies ist nicht effizient, aber ich hätte nichts dagegen, wenn es funktioniert. Das Problem ist, dass, wenn der Benutzer den Zoom sehr schnell mehrmals ändert (ein einfacher langer Bildlauf auf der Karte), der Beobachter mehrmals aufgerufen wird.verwirrende Broschüre.