Как переназначить шаблон в компоненте emberjs?

Question

Что я хочу, когда я нажимаю ссылку на компонент, шаблон будет динамически изменяться с последующим состоянием (некоторые другие html-коды).

Что я сделал в процессе инициализации, шаблон каждого компонента может отображаться динамически. Когда я нажимаю ссылку «Добавить», «Пригласить» или «Принять», статус свойства компонента был изменен соответствующим образом, и функция statusChanged запускается, но шаблон компонента все еще не изменяется.

(я проводил часы на этом и я буду с ума.)

Вот код на emberjs.jsbin.com:

http://emberjs.jsbin.com/laxeqigepu/2/

Как выходы, HTML изменился и может быть выведен из системы. Но почему макет не изменился?

console.log(html); 
this.set('layout', Ember.Handlebars.compile(html)); 

Answer 1

Попробуйте положить эти случаи в шаблоне:

//templates/components/contact-invitation.hbs 
{{#if zeroStatus}} 
    {{#if uidPositive}} 
    <a href="#" {{ action "send" }}><i class="success fa fa-plus"></i> Add</a> 
    {{#else}} 
    <a href="#" {{ action "send" }}><i class="success fa fa-plus"></i> Invite</a> 
    {{/if}} 
{{#else}} 
    {{#if wait}} 
    Wait 
    {{#else}} 
    ... 
    {{/if}} 
{{/if}} 


//components/contact-invitation.js 
import Ember from "ember"; 
export default Ember.Component.extend({ 
    zeroStatus: function() { 
    return this.get('status') === 0; 
    }.property('status'), 

    uidPositive: function() { 
    return this.get('uid') > 0 
    }.property('uid') 

    //etc. 
}); 

Это немного неудобно, потому что Рули не хватает {{# else if }} конструкции, а также потому, что я много о домене не знаю - мое предположение есть, вероятно, лучшее решение, чем zeroStatus, oneStatus и так далее. Это похоже на идиоматическое решение в Ember/Handlebars: определение свойств в классе и использование условных выражений на основе этих свойств в шаблонах.