first of all, thanks for the help. I am sure I'm doing something stupid somewhere but i cannot figure it out and it's driving me crazy. I tried to dollow many articles and suggestion on SO that was working for the other users but not for me.
I am building an app in jQuery, using handlebars as for templating, and getting the data from a backend api built in codeigniter.
I am using an IF statement within an #each to display the check in a checkbox if it was already checked. The issue is that the IF statement doesn't seem to work within #each, since it display all the checkboxes as checked if they clearly aren't.
the jquery function is the following:
var load_checklist = function() {
var $checklistTable = $('#checklist-table');
var $row = $('#checklist-row').html();
$.get(BASE_URL + '/uapi/get_checklist', function(o) {
var template = Handlebars.compile($row);
$checklistTable.append(template(o));
}, 'json');
};
this is the html piece:
<tbody id="checklist-table">
<script id="checklist-row" type="text/x-handlebars-template">
{{#each checklist}}
<tr data-id="{{title}}">
<td>
<label class="fancy-checkbox">
<input type="checkbox" {{#if completed}}checked="checked"{{/if}}>
<span></span>
</label>
</td>
<td colspan="2">{{title}} completed {{completed}}</td>
<td style="text-align: right;">
<button class="btn-view-fund btn btn-default btn-xs" type="button">
<span class="glyphicon glyphicon-list" aria-hidden="true"></span>
</button>
<button class="btn-view-fund btn btn-default btn-xs" type="button">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
{{/each}}
</script>
</tbody>
and the output from the api is the following:
{
"checklist": [{
"checklist_id": "1",
"user_id": "2",
"title": "test1",
"decription": "test",
"action": "test",
"action_target": "test",
"completed": "0",
"date_added": "2017-01-23 19:31:49",
"date_modified": "2017-01-23 19:31:49"
}, {
"checklist_id": "6",
"user_id": "2",
"title": "test2\r\n",
"decription": "test",
"action": "test",
"action_target": "test",
"completed": "1",
"date_added": "2017-01-23 19:31:49",
"date_modified": "2017-01-23 19:32:17"
}, {
"checklist_id": "11",
"user_id": "2",
"title": "test1",
"decription": "test",
"action": "test",
"action_target": "test",
"completed": "0",
"date_added": "2017-01-23 19:31:49",
"date_modified": "2017-01-23 19:31:49"
}]
}
I have alsot tried to do it through a helper adding but it doesn't work.
Handlebars.registerHelper('ifIsOne', function(value, options) {
if(value === 1) {
return options.fn(this);
}
return options.inverse(this);
});
this is the version I'm using
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
and jquery-2.1.1.min.js.
Thank you