Emberモデルを用いてJSONからのEmber - Leaflet座標の解析

Question

emberとember-leaflet.jsには新しいものです。私のハンドルバーテンプレートと私のEmber-Leafletマップの両方にデータを（ajaxファイルへのjson呼び出しを介して）フィードしようとしています。私の現在のセットアップで、データは私のハンドルバーテンプレートに正当に達するが、座標データをEmber - Leafletマップにレンダリングしない。

私は私のガイドとして下記の2つの例を使っていますが、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>

.

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.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

ここで必要な主な修正は、MarkerCollectionLayerのlocationBindingです。locationバインディングはMarkerLayerクラスにある必要があります。さらに、EmberLeaflet.computed関数を使用して、単純なLAT LNGアレイをリーフレット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/