Question

我正在使用maps和backbone.js。使用的地图JS库是Leaflet，但Google Maps API也适用于此处。

问题： Backbone.js允许我们从数据（模型，集合）中分离演示文稿（Views）。使用Google Maps JS API或Leaflets时，我们似乎无法控制标记的渲染，因此无法为每个标记设置Backbone View。这是真的吗？

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

JS（Leaflet，类似于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结构之外做这些。我可能错过了将两者结合在一起的正确方法。有任何想法吗？谢谢！

Answer 1

我猜你对标记的看法是指该标记的弹出内容？可以将视图绑定为要素的弹出内容。至少在传单中。

关键是，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);
});

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

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。）完成模板和事件处理等等。

将标记映射为Backbone.js视图

1 个答案: