Rendering Coordinados en la vista del mapa del folleto usando Ajax en Ember

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

Pregunta

[] Estoy tratando de alimentar datos (a través de una clase

Plantillas HTML / HANDERBARS: 

<!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]

        }
    ]
}

¿Fue útil?

Solución

Esta es la misma respuesta que la otra pregunta,

La vista está respaldada por un controlador, por lo que usted hará this.get('controller') para obtener el controlador que está respaldado por su colección, que si quisiera obtener la colección (que no es necesaria, ya que puede iterar el controlador).this.get('controller.model').

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

http://embarss.jsbin.com/oxidivu/373/edit

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top