单击Ember中的按钮添加Handlebars代码

Question

我正在使用Ember并点击一个按钮，我想在我的页面上添加以下代码：

<div class="clearfix input-file-line">
    <div class="input-file-float-block">
        <button class="btn btn-info">From your computer</button>
        {{input type="file" class="styled"}}
    </div>
    <div class="input-file-float-block">
    or
    </div>
    <div class="input-file-float-block">
        {{#view "cloudUpload"}}
            <button class="btn btn-info" {{action 'showModalForCloudFiles'}} >from a cloud</button>
        {{/view}}
    </div>
</div>

每次我点击按钮，我想显示这个块。因此，例如，如果用户在按钮上单击3次，我想显示此块的3次。

你有任何想法以干净的方式做到吗？

感谢您的回答

Answer 1

你可以创建一个标志来显示或不显示。

isShowingUploadBlock: false,

actions: {
    // call this action from button
  showUploadBlock: function() {
    this.set("isShowingUploadBlock", true);
  }
}

在模板中：

{{#if isShowingUploadBlock}}
<div class="clearfix input-file-line">
  ...
</div>
{{/if}}

如果您愿意，也可以在div上切换课程。