CODEWITHSUNDEEP
javascriptember.js
Mc 100's
Mc 100's

Reputation: 480

Add of Handlebars code on click on a button in Ember

I am using Ember and on a click on a button, I would like to add the following code on my page:

<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>

And each time I click on the button, I would like to show this block. So for example, if a user click 3 times on the button, I would like to display 3 times this block.

Do you have any idea to do it with a clean way?

Thanks for your answers

Upvotes: 0

Views: 76

Answers (1)

brian
brian

Reputation: 167

You could create a flag to display the block or not.

isShowingUploadBlock: false,

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

And in template:

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

If you'd prefer you can also toggle a class on the div instead.

Upvotes: 1

Related Questions