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