El problema

Estoy trabajando en una vista de folleto para emberjs, y estoy teniendo algunos problemas. El folleto es una biblioteca externa y de alguna manera es irrelevante para la pregunta, pero simplemente sepa que es una biblioteca de mapas.

Considere una propiedad simple como el nivel de zoom. Las instancias de mapas de folletos tienen un nivel de zoom accesible a través demap.getZoom() y asignables a través demap.setZoom(zoomLevel). Además, los usuarios pueden interactuar con el mapa y cambiar su nivel de zoom. El folleto nos permiteregistrar una devolución de llamada cuando el zoom cambia.

Me gustaría que mi vista "Ember-Leaflet" tuviera unzoomLevel propiedad de brasas. De esta manera puedo beneficiarme del modelo de objeto de brasas (enlacezoomLevel a una plantilla oa otro valor, por ejemplo), y lo estamos haciendo "a la manera de la brasa".

Solución base

Lo que actualmente tengo es una subclase de Ember.View, con una propiedad de zoomLevel. EndidInsertElement Creo la instancia del mapa del folleto. El código está comentado y debe ser autoexplicativo.

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);
    }
});

Lista de verificación

Para que esta pregunta sea más "respondible", creo que una solución a este problema debería cumplir los siguientes requisitos:

Cuando la propiedadzoomLevel se cambia, el mapa debe cambiar su nivel de zoom en consecuencia (usandomap.setZoom(zoomLevel))Cuando el usuario cambia interactivamente el zoom en el mapa, elzoomLevel la propiedad debe ser cambiada (probablemente usando el mapa del folletozoomend devolución de llamada del evento)

Observe que aquí tenemos una especie de "dependencia circular", es decir,"Hacer algo (setZoom en el mapa) cuandozoomLevel cambios y"cuando algo sucede (el usuario cambia el zoom), cambiazoomLevel". Me gustaría una solución que pudiera evitar las dependencias de este observador circular. AscuasNotifyPropertyChange Podría ser una solución.

Esto parecía una tarea ideal paraPropiedades computadas de Ember, pero no sabía qué poner en la cadena de propiedades dependientes.zoomLevel es básicamente una propiedad que depende de algo que no es una propiedad de ascua.

Actualizar

Mi primer intento fue usar un observador para establecer el zoom en un folleto y vincular un evento en un folletozoomend para configurar elzoomLevel en mi opinión

Problema: cuando configuro zoomLevel en el evento de folleto de zoomend, automáticamente vuelvo a activar mi observador. ¿Me aclaré?

Entonces, esta secuencia de eventos sucede:

cambiozoomLevel en el mapa interactivoincendios de folletoszoomend eventozoomend evento llamada devuelve conjuntoszoomLevelel observador correllamadas innecesariassetZoom en el folleto

Esto no es eficiente, pero no me importaría si funcionara. El problema es que cuando el usuario cambia el zoom varias veces muy rápidamente (un simple desplazamiento largo en el mapa) se llama al observador varias veces,folleto confuso.