Question

我是ember和ember-leaflet.js的新手。我正在尝试将数据（通过ajax调用json文件）提供给我的手柄模板和我的ember-leaflet地图。使用我当前的设置，数据很好地到达我的把手模板，但是没有将坐标数据渲染到余烬传单地图。

我使用下面列出的两个例子作为我的向导，但由于我缺乏使用ember的经验而被撞墙。有人能指出我正确的方向吗？

Ajax and ember example

Partial example of what I'm trying to accomplish

把手模板：

 <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

此处需要的主要修复是MarkerCollectionLayer中的locationBinding。 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/

使用ember模型从json解析ember-leaflet坐标

1 个答案: