如何在 emberjs 组件中重新分配模板？

Question

我想要的是当我点击一个组件的 link 时，模板会随着它的后续状态动态变化（一些其他 html 代码）。

我所做的是在init进程中，每个组件的模板都可以动态显示。当我点击 link 添加、邀请或接受时，组件的属性状态发生了相应的变化并触发了函数 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.
});

这有点尴尬，因为 Handlebars 缺少 {{# else if }} 结构，也因为我对您的域了解不多——我猜可能有比 zeroStatus 更好的解决方案， oneStatus，依此类推。不过，这似乎是 Ember/Handlebars 中惯用的解决方案：在 class 中定义属性，并根据模板中的这些属性使用条件。

如何在 emberjs 组件中重新分配模板？

How to re-assign template in emberjs component?

javascript

handlebars.js

ember.js