Component's layout can't be re-assigned


#1

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.

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