在ember中使用ajax在传单地图视图上渲染坐标

Rendering coordinates on leaflet map view using ajax in ember

本文关键字：地图 视图 坐标 ember ajax 单地图      更新时间：2023-09-26

[]我正在尝试将数据（通过对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>

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

这与另一个问题的答案相同

视图由一个控制器支持，因此您可以执行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

相关文章：