问题

我正在为 emberjs 制作传单 View ，但遇到了一些问题。 Leaflet 是一个外部库，与问题有些无关，但只知道它是一个映射库。

考虑一个简单的属性，例如缩放级别。 Leaflet map 实例具有可通过 map.getZoom() 访问并可通过 map.setZoom(zoomLevel) 分配的缩放级别。此外，用户可以与 map 进行交互，并更改其缩放级别。传单使我们能够register a callback当缩放改变时。

我希望我的“Ember-Leaflet” View 具有 zoomLevel ember 属性。通过这种方式，我可以从 ember 对象模型中获益(例如，将 zoomLevel 绑定(bind)到模板或另一个值)，我们正在以“ember 方式”进行操作。

基础解决方案

我目前拥有的是 Ember.View 的子类，具有 zoomLevel 属性。在 didInsertElement 上，我创建了 Leaflet map 实例。代码已注释，应该是不言自明的。

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

list

为了让这个问题更“可回答”，我认为这个问题的解决方案应该满足以下要求:

1. 当属性 zoomLevel 改变时， map 应该相应地改变它的缩放级别(使用 map.setZoom(zoomLevel))
2. 当用户以交互方式更改 map 上的缩放时，应该更改 zoomLevel 属性(可能使用传单 map 的 zoomend 事件回调)

请注意，我们这里有一种“循环依赖”，即 “当 zoomLevel 改变时做某事(在 map 上设置缩放)” 和 “当某事发生时发生(用户更改缩放)，更改 zoomLevel"。我想要一个可以避免这种循环观察者依赖的解决方案。 Ember 的 notifyPropertyChange可能是一个解决方案。

这似乎是 Ember's computed properties 的理想任务，但我不知道在依赖属性字符串中放什么。 zoomLevel 基本上是一个依赖于非 ember 属性的属性。

更新

我的第一次尝试是使用观察者在传单上设置缩放，并在传单 zoomend 上绑定(bind)一个事件以在我的 View 上设置 zoomLevel。

问题:当我在 zoomend 传单事件上设置 zoomLevel 时，我会自动再次触发我的观察者。我说清楚了吗？

因此，这一系列事件发生了:

1. 更改交互式 map 上的zoomLevel
2. leaflet 触发 zoomend 事件
3. zoomend 事件回调设置 ember zoomLevel
4. 观察者跑
5. 不必要地在传单上调用setZoom

这效率不高，但我不介意它是否有效。 问题是，当用户非常快速地多次更改缩放比例( map 上的一个简单的长滚动)时，观察者被多次调用，confusing leaflet .

最佳答案

好的，我想我已经做到了。

我使用了一个计算属性和一个辅助属性。

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

    //default zoom level
    zoomLevelValue : 13,
    zoomLevel : function(key, value){
        // getter
        if (arguments.length === 1) {
            var zoomLevel = this.get('zoomLevelValue');
            return zoomLevel;
        // setter  
        } else{
            var map = this.get('map');

            this.set('zoomLevelValue', value);
            map.setZoom(value);

            return value;
        }
    }.property('zoomLevelValue'),

    didInsertElement : function() {
        var self = this;
        var zoomLevel = this.get('zoomLevel');

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

        // configure map instance...

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

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

    }
});

基本上，有两种情况:

1. zoomLevel 以编程方式更改 -> 我们更新 map 上的缩放
2. zoomLevel 在 map 上改变了 -> 我们在辅助属性上设置，计算机属性观察者也会收到通知，我们没有在 map 上重新设置缩放级别

但是我有一个新问题，但我认为它与传单有关。当我调用 setZoom 时另一个缩放动画正在进行中，此 setZoom 将被忽略。 例如，执行:

map.setZoom(1);
map.setZoom(12);

以 1 缩放级别结束。

也许与传单相关的 SO 问题可以提供帮助。

关于javascript - 如何创建依赖于普通变量、函数或逻辑的 ember 属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15657579/