Search code examples
ember.jshandlebars.jsember-cli

How to display html button based on index of a {{each}} loop?


How to display html button based loops index?

Hi I have a this template:

<ul>
    {{#each answers as |answer key|~}}
        <li>
            <label>Answer text: <input type="text" name="answer-definition-label[]" 
            value={{answer}}/></label>
            <input type="radio"/> {{view.showDelete}}
        </li>
        {{~else~}}
        <li>
            <label>Answer text: <input type="text" name="answer-definition-label[]"/></label>
            <input type="radio" checked/>
        </li>
        <li>
            <label>Answer text: <input type="text" name="answer-definition-label[]"/></label>
            <input type="radio"/>
        </li>
    {{~/each}}
</ul>
<button {{action "addAnswerRow"}} type="button">Dodaj</button>

Class app/views/forms/elements/ix-selectable-fields.js

import Ember from "ember";
var ShowDelete = Ember.Component.extend({
    template: Ember.HTMLBars.compile('<button style="color:red;">X</button>'),
    init :function(){
        console.log(this);
        console.log(arguments);
    }
});
export default Ember.View.extend({
    content : undefined,
    template: function() {
        if (this.get("content") instanceof Object) {
            return this.get("content");
        } else {
            return Ember.HTMLBars.compile('Please choose answer');
        }
    }.property(),
    showDelete : ShowDelete
});

In the {{each}}{{else}} part I want to display X to allow user to delete rows (li's). When rows come out of store I would like to make delete button appear at the key>1 (for key==0 and key==1 there is no button).

I tried {{if key>1 'test'}} but it throws "Build error", then I tried {{view.showDelete key}} but I get "Uncaught Error: Assertion Failed: A helper named 'view.showDelete' could not be found".

Resolution for Ember-cli (ember.js 1.12.1) based on @Kit-Sunde answer:

//app/helpers/boolean/ix-gt.js
import Ember from "ember";
export default Ember.Handlebars.makeBoundHelper(function (a, b) {
    return a > b;
});

Solution

  • Create helpers/gt.js with:

    export default (a, b) => a > b;
    

    Then in your template:

    {{#if (gt key 1)}}
      {{view.showDelete}}
    {{/if}}