ember: ember-cli how to instantiate a view from a within a controller

mardi 14 avril 2015

ember-cli how to instantiate a view from a within a controller

I am building an map single page app. I would like to be able to add or remove objects to the map retrieved by GEOJson data.

Some of these objects are to be presented as <div>

These objects are therefore not generated form a template but need to be instantiated somewhere else. I've been thinking of the controller in charge of parsing the GEOJson data.

What have I done so far?

View


//app/views/map-popup.js
import Ember from 'ember';

export default Ember.View.extend({
  templateName: "mapPopup",
  classNames: ["map-popup"]
});

Template


// app/templates/map-popup.js
<a class="popup-closer" {{action 'closePopup'}}></a>
<div class="popup-header">{{header}}</div>
<div class="popup-content">{{body}}</div>

Controller


//app/controllers/map-popup.js
/**
 * Created by alex on 13/04/2015.
 */
import Ember from 'ember';

export default Ember.ObjectController.extend({
  needs: ['map'],
  feature: null,
  header: null,
  body: null,
  overlay: null,

  /**
   * Create an overlay to anchor the popup to the map.
   */
  createOverlay: function() {
    return new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
      autoPan: true,
      autoPanAnimation: {
        duration: 250
      }
    }));
  },

  hide: function() {
    this.overlay.setPosition(undefined);
  },

  addToMap: function() {
    var map = this.get('controllers.map.map');
    this.overlay = this.createOverlay();
    map.addOverlay(this.overlay);
    map.on('click', function(evt) {
      if (false !== this.feature && this.feature.getKeys().length > 1 ) {
        this.header = this.feature.get("header");
        this.body = this.feature.get("body");
        this.setPosition(evt.coordinate);
      } else {
        this.hide();
      }
    }, this);
  },

  actions: {
    closePopup: function() {
      this.hide();
    }
  }
});

I was thinking about something like this in the controller:


//app/controllers/map-draw.js
//... some code ...//
var popup = this.get('mapPopup').create({feature: this.sketch});
this.get('popups').pushObject(popup);
popup.addToMap();
//... some more code ...//

I've read a lot about dependency injection, lookup etc.