4

我一起使用地图和backbone.js。使用的 Map JS 库是 Leaflet，但谷歌地图 API 也将在这里应用。

问题： Backbone.js 允许我们将展示（视图）与数据（模型、集合）分开。在使用 Google Maps JS API 或 Leaflets 时，我们似乎无法控制标记的呈现，因此无法为每个标记提供主干视图。这是真的？

将 Maps 与backbone.js 一起使用时，我开始在回调函数中获取嵌套视图和事件处理程序。

JS（传单，类似于 Google Maps API）

// Handle a dragging on the map
map.on('dragend', function() {
    App.markersList.fetch(
        data: someData,
        processData: true
        function() {
            App.markersListView.render();
    };)
});

// Handle a click on a Marker
map.on('popupopen', function() {
    // Activate bootstrap tabs
    $('#tabs').tab();

    // Submit click handler
    $('#submit-button').click(function() {
        $.post('/api/submit-something',
            {data: data},
            function() {
                // Remove some divs
                $('#some-divs').fadeOut();
            })
    })

    // Activate slideshow
    Galleria.loadTheme('/js/vendor/galleria.miniml.min.js');
    Galleria.configure({
        height: 320
    });
    Galleria.run('#galleria');

    // Validation
    $('.email-link form').validate({
        rules: { ... }
    });


});

好吧，您明白了……我需要在 Backbone 的 MVC 结构之外执行这些操作。我可能会错过将两者整合在一起的正确方法。有任何想法吗？谢谢！！

4

1 回答 1

4

我想对于标记的视图，您的意思是该标记的弹出内容？可以将视图绑定为功能的弹出内容。至少在传单中是这样。

关键是，Leaflet Popups 允许使用提供的 DOM 元素作为其内容。要对标记背后的模型有适当的了解，您可以将标记指定为模型的属性。这使您可以获取模型的关联标记。另一种方式可以通过将事件绑定到其签名包含模型的标记来实现。

这是我的地图视图的简化片段，如何在获取集合后进行设置：

_.each(collection.models, function (model) {
    var attr = model.attributes,
        marker = new L.Marker(new L.LatLng(attr.lat, attr.lon));

        marker.on('click', function () {
            App.vent.trigger("model:select", model);
        });

        model.marker = marker;
        map.addLayer(marker);
});

在这里，为集合中的每个模型绘制一个标记，然后标记成为模型的属性。此外，每个标记都与一个单击事件绑定，该事件触发应用程序范围事件聚合器上的自定义“模型：选择”事件。从这里开始，您可以使用该事件通过捕获以下事件来设置弹出视图：

common.vent.on('model:select', function (model) {
    this.select(model);
    this.initPopup(model);
}, this);

InitPopup 可能如下所示：

initPopup = function (model) {
    var marker = model.marker,
        view = new PopupView({model: model});

    marker.bindPopup(view.render().el).openPopup();
};

PopupView 是一个 Backbone 视图（嗯，在我的例子中是 Marionette。）完成模板和事件处理等。

于 2012-11-01T14:02:36.930 回答