Rendering coordinates on leaflet map view using ajax in ember

StackOverflow https://stackoverflow.com//questions/23063741

Question

[]I am trying to feed data (via an call to a file) to both a handlebars template and a map. With my current setup, the data reaches my handlebars template just fine, but doesn't render the coordinates data to the leaflet map. I suspect I am missing some basic piece of the puzzle. Would someone please advise me?

HTML/Handlebars Templates:

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
    <title>sbk_3.0.8</title>
    <link rel="stylesheet" href="css/leaflet.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>



  <script type="text/x-handlebars" data-template-name="application">
    {{outlet}}

  </script>

   <script type="text/x-handlebars" data-template-name="index">
      {{view App.MapView id="map" contentBinding="this"}}
      <div id="blog">
        <ul>
            {{#each item in model}}
                <li>{{item.headline}}</li>
            {{/each}}
        </ul>    
    </div>  
  </script>


      <!--DEPENDENCIES-->
      <script src="js/libs/jquery-1.10.2.min.js"></script>
      <script src="js/libs/handlebars-1.0.0.js"></script>
      <script src="js/libs/ember.js"></script>

      <!--MAP-->
      <script src="js/libs/leaflet-src.js"></script>
      <script src="js/libs/ember-leaflet.min.js"></script>

      <!--APP-->
      <script src="js/application.js"></script>


  </body>
</html>

Ember:

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
    model: function(){
        return App.Item.all();
    }
});

App.Item = Ember.Object.extend();

App.Item.reopenClass({
  all: function() {
      return $.getJSON("js/data/test_e.json").then(function(response) {
        var items = [];

        response.features.forEach( function (data) {
          items.push( App.Item.create(data) );
        });

          return items;


      });
  }
});


App.MapView = Ember.View.extend({

    didInsertElement: function () {

        var map = L.map('map', {zoomControl: false}).setView([40.685259, -73.977664], 14);

        L.tileLayer('http://{s}.tile.cloudmade.com/[redacted key]/[redacted id]/256/{z}/{x}/{y}.png').addTo(map);

        console.log(this.get('content'));
        //HERE IS WHERE I GET STUCK. I CAN OUTPUT THE JSON TO THE CONSOLE...
        //BUT HOW DO I DRILL DOWN, AND ULTIMATELY...
        //HOW DO I SEND THE VALUE OF THE "CENTER" KEY TO LEAFLET, i.e. L.Marker([jsonObject.center]).addTo(map);      
    }
});

App.IndexController =
  Ember.Controller.extend({});

JSON:

{
    "features": [
        {
            "headline": "Docker, the Linux container runtime: now open-source",
            "center" : [40.685259, -73.977664]
        },
        {
            "headline": "What's Actually Wrong with Yahoo's Purchase of Summly",
            "center" : [40.685259, -73.977664]

        }
    ]
}
Was it helpful?

Solution

This is the same answer as the other question,

The view is backed by a controller, so you would do this.get('controller') to get the controller which is backed by your collection which if you wanted to get the collection (which isn't necessary since you can iterate the controller) you could do this.get('controller.model'). 

var controller = this.get('controller');
controller.forEach(function(item){
   console.log(item.get('title'));
});

http://emberjs.jsbin.com/OxIDiVU/373/edit

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top