Question

我想要的是当我点击组件的链接时，模板将随后的状态（其他一些html代码）动态变化。

我所做的是在init过程中，每个组件的模板都可以动态显示。当我单击链接添加，邀请或接受时，组件的属性状态已相应更改，并且触发了函数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 }}构造，也因为我对你的领域了解不多 - 我的猜测可能是比{{更好的解决方案1}}，zeroStatus等等。这似乎是Ember / Handlebars中惯用的解决方案：在类中定义属性，并在模板中使用基于这些属性的条件。

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

1 个答案: