ember 모델을 사용하여 json에서 ember-leaflet 좌표 구문 분석

Question

나는 처음이다 ember 그리고 ember-leaflet.js.데이터를 공급하려고 합니다( ajax 전화하다 json 파일)을 핸들바 템플릿과 엠버 전단지 맵에 모두 추가합니다.현재 설정에서는 데이터가 핸들바 템플릿에 제대로 도달하지만 좌표 데이터를 엠버 전단지 맵에 렌더링하지 않습니다.

나는 아래 나열된 두 가지 예를 가이드로 사용하고 있지만 Ember에 대한 경험이 부족하여 벽에 부딪혔습니다.누구든지 나에게 올바른 방향을 알려줄 수 있습니까?

Ajax와 ember의 예

내가 성취하려는 것의 부분적인 예

핸들바 템플릿:

 <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"}}
      <div id="blog">
        <ul>
            {{#each item in model}}
                <li>{{item.headline}}</li>
            {{/each}}
        </ul>    
    </div>  
  </script>

타다 남은 것:

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.MarkerCollectionLayer =
  EmberLeaflet.MarkerCollectionLayer.extend({
    locationBinding: 'controller.item.center'});

App.MapView = EmberLeaflet.MapView.extend({
    childLayers: [
      EmberLeaflet.DefaultTileLayer,
      App.MarkerCollectionLayer]
});

App.IndexController =
  Ember.Controller.extend({});

JSON 파일:

{
    "features": [
        {
            "headline": "Docker, the Linux container runtime: now open-source",
            "center" : [40.714, -74.000]
        },
        {
            "headline": "What's Actually Wrong with Yahoo's Purchase of Summly",
            "center" : [40.714, -73.989]

        }
    ]
}

Answer 1

여기에 필요한 주요 수정 사항은 다음과 같습니다. locationBinding MarkerCollectionLayer에서.그만큼 location 바인딩은 MarkerLayer 클래스에 있어야 합니다.또한 다음을 사용해야 합니다. EmberLeaflet.computed 간단한 lat lng 배열을 Leaflet LatLng 개체로 변환하는 함수입니다.다음 예를 참조하세요.

App.MarkerCollectionLayer = EmberLeaflet.MarkerCollectionLayer.extend({
  content: Ember.computed.alias('controller'),
  itemLayerClass: EmberLeaflet.MarkerLayer.extend({
    location: EmberLeaflet.computed.latLngFromLatLngArray('content.center'),
  })
});

전체 작업 예제가 포함된 이 JSFiddle을 확인하세요. http://jsfiddle.net/xALu4/2/