如何将js传单与Backbone js集成？

Question

I am trying to develop an application that is based on Backbone JS. I want to embed a OpenStreetMap map based on leaflet JS but I could not find any tutorial.

Answer 1

I found the above answer to render the map incorrectly.

Leaflet expects the containing element to already be located in the DOM when a map is initialized. This is why using setTimeout "works". By the time setTimeout fires the View has been appended to the page, so Leaflet can initialize correctly.

I believe it is cleaner to break apart the append step and the render step. By appending the View to the page before rendering it you can ensure that Leaflet will properly initialize without having to use setTimeout .

Here is an example, based on the one above:

var MapView = Backbone.View.extend({

  render: function () {
    this.map = L.map(this.el).setView([55.75, 37.58], 10);

    L.tileLayer('http://{s}.tile.cloudmade.com/4e5f745e28654b7eb26aab577eed79ee/997/256/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>[…]',
      maxZoom: 18
    }).addTo(map);

    return this;
  }

});

$('body').append(MapView.el);
MapView.render();

Answer 2

I've created a jsfiddle to show how you can use Leaflet inside a Backbone.View: http://jsfiddle.net/theotheo/CJcK6/

// bare template
<script type='template' id='map-template'>
   <div id="map"></div>
</script>

// simple view
var MapView = Backbone.View.extend({
  template: _.template($('#map-template').html()),
  render: function () {
    this.$el.html(this.template());

    var map = L.map(this.$('#map')[0]).setView([55.75, 37.58], 10);
    L.tileLayer('http://{s}.tile.cloudmade.com/4e5f745e28654b7eb26aab577eed79ee/997/256/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>[…]',
      maxZoom: 18
    }).addTo(map);

    return this;
  }
});

Feel free to ask.

Update :

Example with jQuery Mobile: http://jsfiddle.net/theotheo/mh6mA/