How to re-assign template in emberjs component?

What I want is when I click on a link of a component, the template will change dynamically with its subsequent state(some other html codes).

What I have done is in init process, every component's template could be displayed dynamically. When I click link Add, Invite or Accept, the property status of component was changed accordingly and function statusChanged is triggered but component's template was still not changed.

(I've spent hours on this and I'm gonna crazy.)

Here's the code:

{{!-- /templates/me/invite.hbs --}}
{{#each contact in model}}
    {{contact-invitation contact=contact actionAccept="acceptContactRequest" actionSend="sendContactRequest"}}
{{/each}}

// /components/contact-invitation.js
import Ember from "ember";
export default Ember.Component.extend({
  templateAdd: '<a href="#" {{ action "send" }}><i class="success fa fa-plus"></i> Add</a>',
  templateInvite: '<a href="#" {{ action "send" }}><i class="success fa fa-plus"></i> Invite</a>',
  templateWait: 'Wait',
  templateAccept: '<a href="#" {{ action "accept" }}><i class="success fa fa-check"></i> Accept</a>',
  templateFriends: 'Friends',
  statusChanged: function() {
    var html = '';
    var contact = this.get('contact');
    var status = this.get('status');
    console.log( "status:" + status );
    switch (status) {
      case 0:
        if(contact.get('uid') > 0) {
          html = this.get('templateAdd');
        } else {
          html = this.get('templateInvite');
        }
        break;
      case 1:
        html = this.get('templateWait');
        break;
      case 2:
        html = this.get('templateAccept');
        break;
      case 3:
        html = this.get('templateFriends');
    }
    console.log( html );
    this.set('layout', Ember.Handlebars.compile(html));
  }.observes('status').on('init'),
  status: function(){
    return this.get('contact').get('status');
  }.property('contact'),
  actions: {
    'send': function() {
      this.set('status', 1);
      this.sendAction('actionSend', this.get('contact'));
    },
    'accept': function() {
      this.set('status', 3);
      this.sendAction('actionAccept', this.get('contact'));
    }
  }
});