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".
//app/helpers/boolean/ix-gt.js
import Ember from "ember";
export default Ember.Handlebars.makeBoundHelper(function (a, b) {
return a > b;
});
Create helpers/gt.js with:
export default (a, b) => a > b;
Then in your template:
{{#if (gt key 1)}}
{{view.showDelete}}
{{/if}}