使用 Handlebars 在 Ember Octane 中切换类的正确方法？答案

【问题标题】：Proper way to toggle classes in Ember Octane with Handlebars?使用 Handlebars 在 Ember Octane 中切换类的正确方法？
【发布时间】：2019-11-18 01:38:31
【问题描述】：

我想使用 Ember.js Octane 在类显示打开和显示关闭之间切换。我该怎么做呢？我需要@action 还是@tracked？

<img src="flower.jpg" alt="flower" class="display-on">  
or
<img src="flower.jpg" alt="flower" class="display-off">

【问题讨论】：

在决定使用这两个类中的哪一个时有什么变化？用户点击了什么？或者页面加载时您知道的一些信息？

标签： javascript node.js ember.js frontend ember-octane

【解决方案1】：

这在 Ember 中应该是直截了当的（尤其是 Octane 功能）。

正如@jrjohnson 在评论中提到的，标记取决于您如何管理跟踪状态的方式，以及切换类的方式。在理想情况下，由于您需要单独切换 class，您可以借助 JS 类属性 canShow，使用模板中的条件来渲染类：

<img src="flower.jpg" alt="flower" class={{if this.canShow "display-on" "display-off"}}>

这里，canShow 必须是 @tracked（如您所述），如果您需要在值更改时重新渲染视图（模板）。

希望你在学习 Ember 时玩得开心；）

【讨论】：

我提交了一个显示按钮和操作的编辑，但与此同时，内容如下：<button {{on "click" this.toggleImage}}>Toggle</button> ``` import Component from '@glimmer/component';从'@ember/object'导入{动作}；从'@glimmer/tracking'导入{跟踪}；导出默认类 MyComponentComponent 扩展组件 { @tracked canShow = true; @action toggleImage() { this.canShow = !this.canShow } } ```
@handlebears，我认为您最好单独回复您的建议..