controller_js

import Ember from 'ember';

export default Ember.Controller.extend({
  session: Ember.inject.service(),
  notify: Ember.inject.service(),

  teamToAdd: false,

  actions: {
    toggleAddTeamForm: function(){
      Ember.$("#addTeamForm").toggleClass("hidden");
    },

    cancelAddNewTeam: function(){
      Ember.$("#addTeamForm").toggleClass("hidden");
      this.set('teamToAdd', false);
    },

    submitAddNewTeam: function(team_id){
      var self = this;

      Ember.$("#addUserToTeamSpinner").removeClass('hidden');

      if(team_id){
        var team = this.store.findRecord('team', team_id);
        var user = this.get('user');

        Ember.RSVP.all([team, user]).then(function (array) {
          var team = array[0];
          var user = array[1];

          var uht = self.store.createRecord('user-has-team', {
            team: team,
            user: user
          });

          uht.save().then(function(){
            Ember.$("#addTeamForm").toggleClass("hidden");
            self.set('teamToAdd', false);
            self.send('refreshModel');
          }, function(reason){
            self.validationReport(uht);
          });
        });
      } else {
        this.get('notify').error("You must select a team to add");
      }
    },

    deleteTeamConnection: function(item){
      item.destroyRecord();
      this.send('refreshModel');
    }
  }
});

route_js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function (params) {
    var parentParams = this.paramsFor('crm.contacts.info');
    var id = parentParams.user_id;
    return Ember.RSVP.hash({
      model: this.store.query('client', {'id': id, with: 'user_numbers,user_addrs,user_urls'}),
      user: this.store.query('user', {'id': id, with: 'event_logs'}).then(function(users) {
        return users.get('firstObject');
      }),
      userHasTeams: this.store.query('user-has-team', {user_id: id}),
      clientTeams: this.store.query('team', {mode: 'client'})
    });
  },

  setupController: function (controller, resolved) {
    var model = resolved.model.get('firstObject');
    this._super(controller, model);

    controller.set('user', resolved.user);
    controller.set('userHasTeams', resolved.userHasTeams);

    var availableClientTeams = [];
    resolved.clientTeams.forEach(function(team){
      var matchedTeam = resolved.userHasTeams.find(function(item, index, enumberable){
        var existingTeamName = item.get('team').get('name');
        var proposedTeamName = this.get('name');
        if(existingTeamName === proposedTeamName){
          return true;
        }
      }, team);

      if(typeof matchedTeam === 'undefined'){
        availableClientTeams.push(team);
      }
    });

    controller.set('clientTeams', availableClientTeams);
  },

  actions: {
    refreshModel: function() {
      this.refresh();
    }
  }
});

template_hbs

<div class="col-md-6" style="overflow:hidden;">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h4>Portal Access Details:</h4>
        </div>

        <div class="box-body">
            {{crm/contacts/portal-access client=model user=user}}
        </div>
    </div>
</div>

<div class="col-md-6">
    <div class="box box-primary">
        <div class="box-header with-border" style="overflow:hidden;">
            <h4 style="float:left;">User's Teams:</h4>
            <div class="pull-right">
                <span id="addUserToTeamSpinner" class="hidden">
                    {{fa-icon "spinner" pulse="true"}}
                </span>
            </div>
        </div>

        <div class="box-body">
            <div style="overflow:hidden;">
                <button type="button" class="btn btn-primary pull-right" {{action "toggleAddTeamForm"}}>Add User to Team</button>
            </div>

            <div id="addTeamForm" class="hidden" style="padding:10px 0;">
                <div style="margin-bottom:8px;">
                    {{#x-select value=teamToAdd class="form-control"}}
                        <option value="">- Select Team -</option>
                        {{#each clientTeams as |team| }}
                            {{#x-option value=team.id}}{{team.name}}{{/x-option}}
                        {{/each}}
                    {{/x-select}}
                </div>

                <div style="overflow:hidden;">
                    <button style="margin-left:3px;" type="button" class="btn pull-right" {{action "cancelAddNewTeam"}}>Cancel</button>
                    <button type="button" class="btn btn-primary pull-right" {{action "submitAddNewTeam" teamToAdd}}>
                        Save
                    </button>
                </div>
            </div>

            <hr style="border-color: #ddd;" />

            <div>
                {{#each userHasTeams as |uht|}}
                    <div style="overflow:hidden;">
                        <div class="pull-left">
                            {{uht.team.name}}
                        </div>

                        <div class="pull-right" style="margin-left: 8px;">
                            <button class="btn btn-default btn-xs" {{action 'deleteTeamConnection' uht}}>{{fa-icon 'trash'}}</button>
                        </div>
                    </div>
                {{/each}}
            </div>
        </div>
    </div>
</div>