使用余烬模型从json解析余烬小叶坐标

我是ember和ember-leaflet.js的新手。我试图通过ajax调用json文件将数据提供给我的车把模板和我的余烬小册子地图。用我目前的设置，数据到达我的把手模板就好了，但不会将坐标数据渲染到余烬传单图上。使用余烬模型从json解析余烬小叶坐标

我使用下面列出的两个示例作为我的指南，但由于缺乏有关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] 

     } 
    ] 
}

来源

2014-04-11 JoeyBK

这里需要的主要修复是MarkerCollectionLayer中的locationBinding。 location绑定需要位于MarkerLayer类中。此外，您需要使用EmberLeaflet.computed函数将简单的经纬度数组转换为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/

来源

2014-04-21 19:05:36

然而，这是考虑固定在EmberLeaflet结束一个伟大的项目 - 它应该在默认情况下正确处理纬度经度阵列。我已将它添加到我们的问题列表中！ –

使用余烬模型从json解析余烬小叶坐标

回答

相关问题