Geek asks and answers

Unable to display template with data set in setupController

Emberjs v1.0.0-pre.4

Handlebars 1.0.0.rc.2

I am creating a facebook friends list manager in ember. When I go to list/1/members, the data that MembersRoute populates with the MembersController is not displayed.

MemberRoute will display a friends template, which usually displays all of our friends, but in this scenario only members of the selected list.

Application router

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

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');
    }
});

Friends pattern

<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>

Finally, the data warehouse 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;
    }
});
+5
source share
2 answers

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

setupController: function(controller, model) {
  this._super(controller, model)
  controller.set('something', 'some value');
}
+2
source

, , , model setupController. , EmberJS.

- :

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

:

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

:

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

More articles:


All Articles