エンバーのAjaxを使ったリーフレットマップビューのレンダリング座標

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

質問

[]データをフィードしようとしています（ json fileハンドルバーズテンプレートとマップ。私の現在のセットアップでは、データは私のハンドルバーテンプレートにぴったり合いますが、座標データをリーフレットマップにレンダリングしません。パズル。誰かが私に助言してくださいか？

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://umberjs.jsbin.com/oxidivu/373/edit

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top