childViews array

[miguelcobain]

I was checking Ember 1.10 release post, and stumbled upon an interesting deprecation: http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html#toc_notable-deprecations

Setting the childViews property on a view definition is deprecated in 1.10.

Of course this doesn't affect this project because we're not using Ember Views. However, since they were one of the motivations, we should stick with their best practices as much as possible. Also, it would be easier for Ember users.

I'm opening this issue for a discussion on this matter.

[nickiaconis]

Is this in regards to the childLayers property that consumers set on their MapView? Let's take one of the simpler examples from the gh-pages:

CustomTilesApp = Ember.Application.create();
CustomTilesApp.TileLayer =
  EmberLeaflet.TileLayer.extend({
    tileUrl:
      'http://{s}.tile.cloudmade.com' +
      '/{key}/{styleId}/256/' +
      '{z}/{x}/{y}.png',
    options: {key: 'API-key', styleId: 997}});

CustomTilesApp.IndexView =
  EmberLeaflet.MapView.extend({
    childLayers: [CustomTilesApp.TileLayer]});

How would this be written when using your Ember-CLI port?

[miguelcobain]

I think we're talking about two different things here. The childLayers deprecation has nothing to do with ember-cli port.

Setting the childViews property on a view definition is deprecated in 1.10. This use of childViews is inconsistent with other uses throughout Ember, and as a result is difficult to implement with good performance. Explicitly creating views upon initialization is preferred:

Basically this:

CustomTilesApp.IndexView =
  EmberLeaflet.MapView.extend({
    childLayers: [CustomTilesApp.TileLayer]});

turns into this:

CustomTilesApp.IndexView =
  EmberLeaflet.MapView.extend({
    init: function(){
      this._super();
      this.pushObject(this.createChildView(CustomTilesApp.TileLayer));
    }
});

Regarding your question about an ember-cli version of your code, you could do it like this (still without the deprecation):

// app/layers/tile.js
import TileLayer from 'ember-leaflet/layers/tile';

export default TileLayer.extend({
    tileUrl:
      'http://{s}.tile.cloudmade.com' +
      '/{key}/{styleId}/256/' +
      '{z}/{x}/{y}.png',
    options: {key: 'API-key', styleId: 997}
});

// app/templates/index.hbs

{{ember-leaflet childLayers=controller.childLayers}}

// app/controllers/index.js
import Ember from 'ember';
import CustomTileLayer from '../layers/tile';

export default Ember.Controller.extend({
  childLayers: [CustomTileLayer]
});

Another option would be to override the component.