在余烬中使用Ajax在传单地图视图上渲染坐标

Question

[]我正在尝试将数据（通过对json文件的ajax调用）馈送到车把模板和传单地图。 使用我当前的设置，数据可以很好地到达我的车把模板，但不会将坐标数据呈现到传单地图上。 我怀疑我缺少了ember.js难题的一些基本内容。 有人可以告诉我吗？

HTML /把手模板：

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

烬：

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]

        }
    ]
}

Answer 1

这是与其他问题相同的答案，

该视图由控制器支持，因此您可以执行this.get('controller')以获取由集合支持的控制器，如果要获取该集合，则无需这样做（因为可以迭代控制器，所以这是不必要的），您可以执行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