User message menu howto?

Design
1

I’m starting to learn EmberJS, and have a quick question, I can’t find a answer to.

In my app, I would like to have a dropdown-menu (not a select, just a UL in a DIV) in the topbar in the application template, where the current users 10 newest messages are showed. (like the message drowdown in the top of this page)

What is the best way to do that? Should I use a view, a component or something else, and how do I get the model data?

If some of you have a link to a tutorial, or some code, I would appreciate it.

2

I made a js bin with some relevant code. As I did there, I don’t think you need a component or a view.

  • The info can be loaded by a computed property on the ApplicationController (as shown in example). You can see how I used needs to load in data from some other controller, in your case you would load in the top 10 messages from the MessagesController or something.
  • The dropdown effect can be achieved simply with CSS, you don’t need a view or component for that. If you want more detail about that it’s easily googleable I believe.
3

Thanks for the quick reply.

I’m trying to do what your I can se in your js bin, but i cant get it to work. Here is what i have right now:

App.MessagesRoute = Ember.Route.extend({
  model: function() {
	return ['message1', 'message2'];  //this.store.find('message');
  }
});

App.ApplicationController = Ember.Controller.extend({
  needs: ['messages'],
  userMsgs: Ember.computed.alias('controllers.messages.content')
});

In application.hbs

{{#each msg in userMsgs}}
    <li>{{msg}}</li>
{{else}}
     <li>NONE</li>
{{/each}}

I’ll just get the NONE output, unless I replace usersMsgs: Ember.com… with an array e.g. [‘msg1’,‘msg2’], so from there I can figure out I don’t get the data from MessagesRoute.

What am I doing wrong?

4

That would be because until you actually visit the messages route, that model hook won’t be called, and the content of the MessagesController won’t be set. It worked for my example because I put the loading of the stuff in the model hook for index, which is of course loaded by default.

I’m not actually sure offhand what the “correct” way to deal with this is, maybe someone else can offer their comment?

5

You could try to load more that one model in the same route. I copied the example below from a post last week from alexspeller. You can find the original thread here: Dashboard type views - #7 by alexspeller

export default Ember.Route.extend({
   model: function() {
     return Ember.RSVP.hash({
        projects: this.store.find('project'),
        users: this.store.find('user'),
        activities: this.store.find('activity')
     });
   },

  setupController: function (controller, context) {
    this.controllerFor('projects').set 'model', context.projects;
    this.controllerFor('users').set 'model', context.users;
    this.controllerFor('activities').set 'model', context.activities;
  }
});
You can do this slightly less verbosely using something like @jhsu's technique:

var RSVPRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    for (var name in model) {
      this.controllerFor(name).set('model', model[name]);
    }
  }
});