jquery - 将标记映射为 Backbone.js View

Question

我同时使用 map 和backbone.js。使用的Map JS库是Leaflet，但Google map API也适用于此。

问题:Backbone.js 允许我们将表示( View )与数据(模型、集合)分开。当使用 Google Maps JS API 或 Leaflet 时，我们似乎无法控制标记的渲染，因此无法为每个标记提供主干 View 。这是真的吗？

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

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

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

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

这是我的 map View 的简化片段，说明如何在获取集合后进行设置:

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

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

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 View (在我的例子中是 Marionette。)，包含模板和事件处理等。