Unable to render template with data set in setupController

5
votes

Emberjs v1.0.0-pre.4

Handlebars 1.0.0.rc.2

I'm building a facebook friend list manager in ember. When I navigate to list/1/members the data that MembersRoute populates MembersController with is not appearing.

The MembersRoute will render the friends template, which normally displays all our friends, but in this scenario only the members of the selected list.

The application's router

App.Router.map(function () {
    this.route('instructions');
    this.route('friends');
    this.route('members', {path: '/list/:list_id/members'});
});

The route

App.MembersRoute = Ember.Route.extend({
    model: function () {
        var list = this.controllerFor('application').get('selectedList'),
            friends = list && list.get('members') || [];
        return friends;
    },
    setupController: function (controller, model) {
        var list = this.controllerFor('application').get('selectedList');
        controller.set('title', list.get('title'));
        controller.set('list', list);
        controller.set('content', model);
    },
    renderTemplate: function () {
        this.render('friends');
    }
});

The friends template

<script type='text/x-handlebars' data-template-name='friends'>
  <h2>{{title}}</h2>
  <ul id='friends'>
    {{#each friend in controller}}
      <a href='#' {{action 'select' friend}}>
        <li {{bindAttr class='friend.isSelected:selected'}}>
            <img {{bindAttr src='friend.imageUrl'}}/>
            <p>{{friend.name}}</p>
        </li>
      </a>
    {{else}}
      <h3>There are no friends in this list.</h3>
    {{/each}}
  </ul>
</script>

Application template

<script type='text/x-handlebars' data-template-name='application'>
      <div class='row'>
          <div class='span4'>
              {{render 'lists'}}
          </div>
          <div class='span8>
              {{outlet}}
          </div>
      </div>
</script>

Lastly, the data store and models

App.Store = DS.Store.extend({
  revision: 11,
  adapter: 'DS.FixtureAdapter'
});

App.List = DS.Model.extend({
    members: DS.hasMany('App.Friend'),
    name: DS.attr('string'),
    isSelected: DS.attr('boolean'),
    num_of_members: function () {
        var num = this.get('members').toArray().length,
        str = num + ' Member';
        return num === 1 ? str : str + 's';
    }.property('members'),
    title: function () {
        return 'Friends in ' + this.get('name');
    }.property('name'),
    toggleSelected: function () {
        this.set('isSelected', !this.get('isSelected'));
        return this;
    }
});

App.Friend = DS.Model.extend({
    lists: DS.hasMany('App.List'),
    name: DS.attr('string'),
    imageUrl: DS.attr('string'),
    isSelected: DS.attr('boolean'),
    toggleSelected: function () {
        this.set('isSelected', !this.get('isSelected'));
        return this;
    }
});
2
ember.js

2 Answers

2
votes

really you should just use the _super to implement the default implementation.

setupController: function(controller, model) {
  this._super(controller, model)
  controller.set('something', 'some value');
}
1
votes

Not sure if this helps, but it looks like model is ignored or lost when setupController is defined. I don't know if this is a bug with EmberJS.

My workaround is to set the model directly:

model: function() {
   return this.modelFor('todos');
}

Can be extended by:

setupController: function(controller) {
  controller.set('something', 'some value');
  controller.set('model', this.modelFor('todos'));    // this was originally in the model function
}

Or even better:

setupController: function(controller, model) {
  controller.set('something', 'some value');
  controller.set('model', model);    // this was originally in the model function
}