ember에서 ajax를 사용하여 전단지 지도 보기에서 좌표 렌더링

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

문제

[]데이터를 공급하려고 합니다( 전화하다 파일)을 핸들바 템플릿과 지도.현재 설정에서는 데이터가 핸들바 템플릿에 제대로 도달하지만 좌표 데이터를 전단지 맵에 렌더링하지 않습니다.나는 기본적인 부분을 놓치고 있다고 생각합니다. 퍼즐.누군가 나에게 조언을 해주실 수 있나요?

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]

        }
    ]
}
도움이 되었습니까?

해결책

이는 다른 질문과 동일한 답변입니다.

뷰는 컨트롤러에 의해 지원되므로 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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top