Emberjs view binding for Google maps markers

2019-05-09 02:02发布

问题:

I have a /companies route set up which uses my Company model to retrieve companies. I also have a Map view which I'm trying to display my companies on. I can't seem to find a way to get the list of companies inside of the view.

With the code below, the map renders as expected and the company names are all printed as paragraphs.

window.App = Ember.Application.create()

App.Router.map ->
  @resource 'companies'

App.CompaniesRoute = Ember.Route.extend
  model: ->
    App.Company.find()

App.Map = Ember.View.extend
  tagName: 'div'

  didInsertElement: ->
    opts =
      zoom: 12
      center: new google.maps.LatLng 37.762030, -122.441940
      mapTypeId: google.maps.MapTypeId.ROADMAP

    e = @get 'element'
    m = new google.maps.Map e, opts

My template looks like this:

{{#each model}}
  <p>{{name}}</p>
{{/each}}

{{view App.Map}}

The company names all get displayed, I just can't find any way to get a hold of the model/content from within the View.

So far I've tried @get 'model' from within didInsertElement. I've tried creating a markersBinding property on the View with a range of inputs like 'controller.content' and 'controller.model' and 'route.model' - all to no avail. I also tried adding another method on the view which observes each of the bindings I attempted.

I feel like I must be missing something. How can I subscribe/observe the content/model in my View?

Thanks.