javascript - Rendering coordinates on leaflet map view using ajax in ember -
[]i trying feed data (via ajax call json file) both handlebars template , leaflet map. current setup, data reaches handlebars template fine, doesn't render coordinates data leaflet map. suspect missing basic piece of ember.js puzzle. please advise me?
html/handlebars templates:
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"> <title>sbk_3.0.8</title> <link rel="stylesheet" href="css/leaflet.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <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" contentbinding="this"}} <div id="blog"> <ul> {{#each item in model}} <li>{{item.headline}}</li> {{/each}} </ul> </div> </script> <!--dependencies--> <script src="js/libs/jquery-1.10.2.min.js"></script> <script src="js/libs/handlebars-1.0.0.js"></script> <script src="js/libs/ember.js"></script> <!--map--> <script src="js/libs/leaflet-src.js"></script> <script src="js/libs/ember-leaflet.min.js"></script> <!--app--> <script src="js/application.js"></script> </body> </html> ember:
app = ember.application.create(); app.router.map(function() { // put 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.mapview = ember.view.extend({ didinsertelement: function () { var map = l.map('map', {zoomcontrol: false}).setview([40.685259, -73.977664], 14); l.tilelayer('http://{s}.tile.cloudmade.com/[redacted key]/[redacted id]/256/{z}/{x}/{y}.png').addto(map); console.log(this.get('content')); //here stuck. can output json console... //but how drill down, , ultimately... //how send value of "center" key leaflet, i.e. l.marker([jsonobject.center]).addto(map); } }); app.indexcontroller = ember.controller.extend({}); json:
{ "features": [ { "headline": "docker, linux container runtime: open-source", "center" : [40.685259, -73.977664] }, { "headline": "what's wrong yahoo's purchase of summly", "center" : [40.685259, -73.977664] } ] }
this same answer other question,
the view backed controller, this.get('controller') controller backed collection if wanted collection (which isn't necessary since can iterate controller) this.get('controller.model').
var controller = this.get('controller'); controller.foreach(function(item){ console.log(item.get('title')); });
Comments
Post a Comment