backbone.js - 来自 Backbone.js 集合的传单标记？

Question

我正在尝试基于backbone.js 和leaflet 构建一个应用程序。
用户可以拖动 map 并查看 map 上的标记。
可以通过单击来选择标记。选择后，他们必须更改显示在(不是弹出窗口)上的图标和标记详细信息。

我的主干模型由几个实体组成:

标记模型包含
纬度，经度
类型，
标题，
已选择

map 模型包含:
map 的中心，
标记收集，
选定的标记

任何人都知道我如何制作这种功能？
如何将传单标记作为主干 View ？

Answer 1

主干 View 和传单对象模型并不完美，因为标记不包含在 DOM 元素中，这就是 Backbone.View.el应该代表。记号笔 做 当然有一个元素(可通过 marker._icon 访问)，但在标记呈现到 map 之前它不存在。

也就是说，你可以 用 Backbone View 表示标记，你不能使用 events或任何 el相关功能。我已经使用 OpenLayers 成功实现了类似的 View ，它具有相同的“问题”，并且工作正常。

我认为这最容易用代码来解释:

//MarkerView has no element
App.Views.MarkerView = Backbone.View.extend({

    initialize: function(options) {
        //pass map instance to the marker
        this.map = options.map;
        //create the marker object
        this.marker = L.marker([this.model.get('longitude'), this.model.get('latitude')]);
    },

    render: function() {    
        //append marker to the map
        this.marker.addTo(this.map);

        //can't use events hash, because the events are bound
        //to the marker, not the element. It would be possible
        //to set the view's element to this.marker._icon after
        //adding it to the map, but it's a bit hacky.
        this.marker.on('click', this.onClick);
    },

    onClick: function() {
        alert("click");
    }
});

//MapView renders a map to the #map element
App.Views.MapView = Backbone.View.extend({
    id:"#map",
    render: function() {
        //render map element
        var map = this.map =  L.map(this.$el.attr('id'))
            .setView([this.model.get('centerLon'),  this.model.get('centerLat') ], 13)
            .addLayer(L.tileLayer(this.model.get('layerUrl'), { maxZoom: 18 }));

        //render each marker
        this.markerViews = this.model.get('markers').map(function(marker) {
            return new App.Views.MarkerView({model:marker, map:map}).render();
        });
    }
});

Here's a demo on JSFiddle .