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

[] 을 통해 json 파일을 호출하여 핸들 막대 템플릿과 leaflet 맵에 데이터를 공급하려고합니다. 현재 설정으로는 데이터가 내 핸들 막대 템플릿에 잘 도달하지만 좌표 데이터를 전단지에 렌더링하지 않습니다. 나는 ember.js 수수께끼의 기본적인 조각이 빠져 있다고 생각합니다. 누군가 제게 조언 해 주시겠습니까?에버에서 ajax를 사용하여 전단지 맵보기에서 좌표 렌더링

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] 

     } 
    ] 
}

출처

2014-04-14 JoeyBK

이 다른 질문과 같은 대답,

뷰 콘트로로 뒷받침된다. 그럼, 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

출처

2014-04-15 17:11:42 Kingpin2k

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

답변

관련 문제