Ember route.connections is undefined while render on error events

I'd like to render message about server error. I create special route that present error message view. At the same time I don't want redirect to that route's url to be able to reload current page. So I decided to use function render in application route.

// application/route.js
actions: {
  error: function(error, transition) {
    if (error.errors) {
      return this.render('server-error.internal');
    }
    return true;
  }
}

It's working correctly when I redirect do page with error from other application's route that load correctly. When I type manually url of page with error I take error

Cannot read property 'push' of undefined

As I checked it's about uninitialized route's property named 'connections'. I found similar issues on github, but I couldn't find solution. I'll be grateful for any help.

I'm using ember-cli: 2.4.3

How to access model's metadata or static data in hbs template

I have a model like this

var model = Model.extend({
  id: attr(),
  profileName: attr(),
  email: attr(),
  role: attr(),
  ...
});

And now I need to attach to it some metadata/static attribute.

var model = Model.extend({
  id: attr(),
  profileName: attr(),
  email: attr(),
  role: attr(),
  ...
  viewOrder: Ember.computed(function() {
      return [get(this, 'id'), get(this, 'email'), get(this, 'role'), get(this, 'profileName'), ...];
  }),
  viewColNames: Ember.computed(function() {
      return ['Id', 'Email', 'Role', 'Username', ...];
  })
});

And then in the view I've got something like this:

<tbody>
  
    <tr>
      
      <td></td>
      
    </tr>
  
</tbody>

Which is not great, but it works, but i would also like to do something like that:

<thead>
  <tr>
    
    <th></th>
    
  </tr>
</thead>

(I am aware this does not work)

So my question is how can i read static attribute of model in template or even better, set metadata (viewOrder, viewColNames) to model and then read it in template, or if there is any other better way to handle this situation.

Thanks

Is it possible to inject a controller or another class in an EmberJS Component?

I'm trying to use a method from one controller inside a component but something must be wrong.

I have the route /calendars with its own controller (controllers/calendars.js) and template (templates/calendars.hbs)

Inside calendars.hbs I have implemented a chain of components with templates for the main screen of my app and for the menu. Inside the menu, I have the final component that should call to a calendars' controller method.

Controller:

import Ember from 'ember';

export default Ember.Controller.extend({
  actions:{
    createCalendar: function(){
      console.log("app/controllers/calendars.js");
    }
  }

});

Route:

import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin,{
  model: function(params) {
    return [
      {id:"1", name:"Calendario de trabajo", shared:false, position: 0},
      {id:"2", name:"Calendario personal", shared:false, position: 1},
    ];
  },

  actions:{
    createCalendar: function(calendar){
      console.log("app/routes/calendars.js");
    }
  }
});

Component:

import Ember from 'ember';

export default Ember.Component.extend({

  calendars: Ember.inject.controller("calendars");

  actions: {
    createCalendar: function(){
      console.log("app/components/menu/calendar-dock-footer.js");
      this.calendars.createCalendar();
    }
  }
});

Templates:

calendars.hbs

   Show me the money! 
  
  

main-template.hbs (component)

...
  
...

main-dock.hbs (component)

...
 
...

calendar-dock-footer.hbs (component with button)

<div class="row ht-calendar-footer-content">
    <button class="btn btn-sm btn-info" >
        <label> Add Calendar</label>
    </button>
</div>

I have tried to pass the action from the calendars.hbs to the component with the button, and it runs but what I need to call the method inside calendars.js from the component with the button.

Actions sent from child route aftermodel hook aren't catched in parent route

Let me show you my configuration before explaning my problem. So here is an extract of my router :

Router.map(function() {
    [...]
    this.route('parent', {path: '/:parent_slug'}, function () {
        this.route('child', {path: '/:child_slug'});
    });
});

The parent route displays a component which need the parent_slug and optionally the child_slug. So in the child route afterModel() hook, I send an action to the parent route to update the child_slug it gives to the component.

In the child route :

afterModel(model) {
    [...]
    this.send('myAction', model.childSlug);
    [...]
}

In the parent route :

actions: {
    myAction(slug) {
        this.set('childSlug', slug);
    }
}

If I load the parent route first and then do a transition to the child route, the action will be sent and correctly catched by the parent but if I load the child route directly, the action is not catched. I tried to catch the action in the application route and it works.

So I guess that during the afterModel() hook of the childroute, the parents route actions aren't loaded yet.

Do you guys know if it's a bug or it's a normal behaviour ? I mean to start loading the child route before the parent one is completely loaded ?

Thank you !

Show the newly created record on .save()

Ember 2.5

I have a page that displays a list of all types of commutes (/commutetypes). To create a new commute type, I go to commutetypes/new.

Once I save the new commute type and transition back to /commutetypes. The new commute type does not display on the list. Can I refresh the model to display it?

// save action in route.
save: function() {
    var _this = this;

    var com = this.store.createRecord('commutetype', {
        name: document.getElementById('nameInput').value,
        description: document.getElementById('descriptionInput').value
    });
    com.save().then(function(){
        _this.transitionTo('commutetypes');
    });
}

Firebase() object not defined?

I'm working on an emberjs project for work and am currently trying to implement a button which will clear my firebase database when click. I planned to do that using the remove() function of a Firebase object. However, when I run ember server I get an error saying Firebase is not defined. I have added the config code to config/environment.js. What am I missing?

Edit: Here is the code. I'm not sure if it would accomplish the task that I want since I cannot test it due to error described above:

import Ember from 'ember';

export default Ember.Controller.extend({
    actions: {
        clear() {
            var ref = new Firebase('http://ift.tt/28KZ4IH');

        ref.remove();   

        }       
    }
});

Binding to dynamic route segment

I am trying to bind a computed property (or change via an observer) the iso dynamic segment in the locale route. The router I have is represented by:

this.route('locale', { path: '/:iso' }, function(){
    this.route('products', function() {
        this.route('single', { path: '/:id/:seoName' });
    });
});

Which results in URLs like this:

http://localhost:4200/en-us
http://localhost:4200/en-us/products
http://localhost:4200/en-us/products/123/product-name

What I'm wondering is if there is any way to programatically change the en-us part of the URL no matter which route you're on? My issue so far with just running a transitionTo() is that I have no way of knowing what the sub routes are from the current location.

Basically, I need a way of binding the en-us segment to a computed property I can that can update the URL automatically when it changes.

Thanks in advance!