handlebars, checked checkbox if the permission is true by an object array - templates

Question

I am working with backbone and handlebars for a month and I have this problem.
I have this object that I get from my model:
Object {list: Object, permissions: Object}
list: Object
0: Object
id: "1"
name: "cms"
__proto__: Object
1: Object
2: Object
3: Object
permissions: Object
analytics: true
categories: false
cms: true
coupons: false
Now with handlebars I'm trying to find out how I can checked the box when the relative permission value is true like this:
{{#each list}}
<tr>
<th><input type="checkbox" id="{{id}}"
{{#each permission}}
{{#ifCond this {{name}} }}//that's where my current error is when I try to precompile this template,the syntax is wrong
checked
{{/ifCond}}
{{/each}}
/>{{name}}
</th>
</tr>
{{/each}}
ifCond is a function that I builded in handlebars.js:
Handlebars.registerHelper('ifCond', function(v1, v2, options) {
if(v1 === v2) {
return options.fn(this);
}
return options.inverse(this);
});
Hope someone can help me out!!
Thank you!

Answer 1

This is how you would have written your template if there was no helper in the first place.
Start from this point
Without Helper
In the template you were trying to iterate over objects, which is not the right approach.
You should leave that to the template helper to take care of that passing the correct context.
---- This is again wrong ( something in these lines)
| compare="name"
{{#ifCond this {{name}} }}
^
^ ----- Context
|
Name of helper
under which it is
registered
When you pass a value to compare=name the value will be replaces by that key value of that object.
But remember that you are already inside each loop that iterates over list object.
So this will point to that object. So you need to go back to the parent object 1 step using ../ which will give you access to the permissions object.
{{#ifCond this compare=name }}
Will map to the arguments of the helper.
'ifCond', function(v1, v2, options) {
v1 will be this context
v2 will map to the handlebar options
options will be undefined as no 3rd argument was passed in the helper
So the template will be of this form
{{#ifCond this obj=../this compare=this.name}}
this - context of each (current object in loop)
obj= will be dumped into the options.hash object. It is the main object.
compare will be the name attribute inside this context
maps to
'ifCond', function (context, options)
So your template structure will look like below
Template
<script type="text/template" id="handlebar-template">
{{#each list}}
<tr>
<th>
<span>
<input type="checkbox" id="{{id}}"
{{#ifCond this obj=../this compare=this.name}}
checked
{{/ifCond}} />
</span>
<span class="name">{{name}}</span>
</th>
</tr>
{{/each}}
</script>
Helper
Handlebars.registerHelper('ifCond', function (context, options) {
var permissions = options.hash.obj.permissions,
name = options.hash.compare;
if (permissions[name]){
return options.fn(this);
}
return options.inverse(this);
});
Full Code
// The object in question
var obj = {
"list": [{
"id": 1,
"name": "cms"
}, {
"id": 2,
"name": "analytics"
}, {
"id": 3,
"name": "coupons"
}, {
"id": 4,
"name": "categories"
}],
"permissions": {
"analytics": true,
"categories": false,
"cms": true,
"coupons": false
}
};
// Model for the Object
var HandlebarModel = Backbone.Model.extend({});
var handlebarModel = new HandlebarModel(obj);
// View that will render the template inside the table
var HandlebarView = Backbone.View.extend({
el: $('#table'),
initialize: function () {
var source = $('#handlebar-template').html();
this.template = Handlebars.compile(source);
},
render: function () {
var $elem = $('tbody', this.$el);
$elem.empty();
$elem.append(this.template(this.model.toJSON()));
}
});
Handlebars.registerHelper('ifCond', function (context, options) {
console.log("this context " + this);
console.log("name -" + options.hash.compare);
console.log("Main Object - " + options.hash.obj);
var permissions = options.hash.obj.permissions,
name = options.hash.compare;
if (permissions[name]){
return options.fn(this);
}
return options.inverse(this);
});
var handlebarView = new HandlebarView({
model: handlebarModel
});
handlebarView.render();
Check Fiddle