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

How to re-assign template in emberjs component?

本文关键字：分配 新分配 emberjs 组件      更新时间：2023-09-26

我想要的是，当我单击组件的链接时，模板将随着其后续状态（其他一些html代码）而动态更改。

我所做的是在初始化过程中，每个组件的模板都可以动态显示。当我单击链接添加、邀请或接受时，组件的属性状态已相应更改，并触发了功能状态更改，但组件的模板仍未更改。

（我花了几个小时做这个，我要疯了。

这是 emberjs.jsbin.com 上的代码：

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

作为输出，html 已更改，可以注销。但是为什么布局没有改变呢？

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

尝试将这些案例放在模板中：

//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 中的惯用解决方案：在类中定义属性，并根据模板中的这些属性使用条件。

相关文章：