使用餘燼模型從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解析餘燼小葉座標

回答

相關問題