我正在使用maps和backbone.js。 使用的地图JS库是Leaflet，但Google地图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结构之外做这些。 我可能错过了将两者结合在一起的正确方法。 有任何想法吗？ 谢谢！！
I am using maps and backbone.js together. Map JS library used is Leaflet, but Google maps API will apply here as well.
Problem: Backbone.js allows us to seperate the presentation (Views) from the data (Models, Collections). When using Google Maps JS API or Leaflets, we do not seem to have control over the rendering of the markers, thus unable to have a Backbone View for each marker. Is this true?
When using Maps together with backbone.js, I start to get nested views and event handlers in the callback functions.
JS (Leaflet, similar to 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: { ... } }); });Well you get the idea... I need to do these outside of Backbone's MVC structure. I could be missing out on the correct way to integrate both together. Any ideas? Thanks!!
最满意答案
我想用标记来查看弹出窗口的内容到那个标记？ 可以将视图绑定为要素的弹出内容。 至少在Leaflet中。
关键是，Leaflet Popup允许使用提供的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）。完成模板和事件处理等等。
I guess with view for the marker you mean the content of a popup to that marker? It is possible to bind a view as the popup content of a feature. At least in Leaflet that is.
The key is, that Leaflet Popups allow to use a provided DOM element as its content. To have appropriate knowledge of the model behind a marker you may specify the marker as a property of the model. This allows you to get the associated marker of the model. The other way around can be achieved via an event binding to the marker whose signature comprises the model.
This is a simplified snippet of my map view how to to set it up after fetching the collection:
_.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); });Here, for each model in the collection a marker is drawn and then the marker becomes a property of the model. Also, each marker is bound with an click event that triggers the custom "model:select" event on an application-wide event aggregator. From here on you can use that event to set up the popup view by catching the event like:
common.vent.on('model:select', function (model) { this.select(model); this.initPopup(model); }, this);InitPopup may look like this:
initPopup = function (model) { var marker = model.marker, view = new PopupView({model: model}); marker.bindPopup(view.render().el).openPopup(); };The PopupView is a Backbone view (Well, Marionette in my case.) complete with template and event handling and so on.
更多推荐
发布评论