將地圖標記作爲Backbone.js觀看

我將地圖和backbone.js一起使用。使用的Map JS庫是Leaflet，但Google Maps API也適用於此。將地圖標記作爲Backbone.js觀看

問題： Backbone.js允許我們從數據（模型，集合）中分離表示（視圖）。使用Google Maps JS API或傳單時，我們似乎無法控制標記的渲染，因此無法爲每個標記提供Backbone視圖。這是真的？

與backbone.js一起使用Maps時，我開始在回調函數中獲取嵌套的視圖和事件處理函數。

JS（單張，類似於谷歌地圖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: { ... } 
    }); 


});

那麼你的想法......我需要做的這些骨幹的MVC結構之外。我可能錯過了將兩者結合在一起的正確方法。有任何想法嗎？謝謝！！

來源

2012-10-07 Nyxynyx

我之前在使用Google地圖時遇到了類似問題，無法將事件和回調分隔到視圖中。 –

骨幹視圖非常需要DOM元素。傳單標記和覆蓋不是DOM元素，所以我認爲你幾乎必須完全重寫骨幹視圖才能使其工作。即使您將視圖元素設置爲由Leaflet標記創建的DOM元素，您也必須更改骨幹視圖綁定事件的方式。事件目前綁定到DOM元素，但是對於要將事件綁定到添加到地圖的圖層的Leaflet。我並不是說這不可能，但它似乎需要對Backbone視圖進行相當重要的重寫。 – InPursuit

我想你所指的標記是指那個標記彈出的內容嗎？可以將視圖綁定爲功能的彈出內容。至少在宣傳單上是。

關鍵是，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); 
});

這裏，集合中的每個模型的標誌繪製，然後標記成爲屬性的模型。此外，每個標記都與一個單擊事件綁定，該事件在應用程序範圍內的事件聚合器上觸發自定義「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是骨幹視圖（好吧，木偶在我的情況。）完成模板和事件處理等。

來源

2012-11-01 14:02:36 bentrm

將地圖標記作爲Backbone.js觀看

回答

相關問題