Backbone.js - What is the best way to check a checkbox - backbone.js

Question

My backbone model has a boolean value (isRegistered). When I render out the view I want to have a checkbox checked or unchecked depending on the true/false value of the boolean.
My current effort looks like this:
<input id="isRegisteredCheckbox" checked="<%= isRegistered ? 'checked': ''"/>
this doesn't work because according to the W3C Specification the checked attribute needs to be completely removed to uncheck a checkbox.
How do I do it using backbone template?

Answer 1

You could use a test to enclose checked='checked'
<input id="isRegisteredCheckbox" <% if (isRegistered) { %>checked="checked"<% } %> />

Answer 2

You don't need the checked= part. just print out checked in the tag if it needs to be checked.
EDIT
Now that we've determined that just printing "checked" out is valid html, you might try for simplicity:
render:
var registered;
var tmpl = _.template(your template);
isRegistered ? registered = 'checked' : registered = '';
var tmpl_data = _.extend(this.model.toJSON(), {registered: registered}); // or whatever values you need to add
$(this.el).html(tmpl(tmpl_data));
template:
<input type="checkbox" {{ registered }}>
No need for messy conditionals in your template using this method.

Answer 3

I used to use a Decorator for this cases. I expose here an example of how it can looks like:
// code simplified and not tested
var MyModelDecorator = Backbone.Model.extend({
initialize: function( opts ){
this.model = opts.model;
},
toJSON: function(){
var json =
_.extend(
this.model.toJSON(),
{
checked: this.checked(),
css_classes: this.cssClasses()
}
);
return json;
},
checked: function(){
result = "";
if( this.model.get( "checked" ) ) result += "checked=\"true\"";
return result;
},
cssClasses: function(){
result = "";
if( this.model.get( "checked" ) ) result += " checked";
if( this.model.get( "key" ) == "value" ) result += " important";
return result;
}
});
I have added an extra css_classes decorator attribute so you can see this approach can be a common solution for several situations.
Your View.render can look like this:
// code simplified and not tested
var myView = Backbone.View.extend({
template: _.template( "<input id=\"isRegisteredCheckbox\" <%= checked %> class=\"<%= css_classes %>\" />" ),
render: function(){
var decorator = new MyModelDecorator({ model: this.model });
this.$el.html( this.template( decorator.toJSON() ) );
}
});

Answer 4

Here is a very simple way of doing it.
<input <% if(isRegistered) print("CHECKED"); %> type="checkbox" id="isRegisteredCheckbox" />
Notice that i use <% and not <%= for the condition.
You could just set the value of isRegistered to "CHECKED" or "" in your model and call
<input id="isRegisteredCheckbox" <%= registered %> />
with something like
serialize: function() {
var isChecked = (isRegistered) ? "CHECKED" : "";
return {registered : ischecked};
},

Answer 5

I had a similar issue where I inherited someone's Django + hamlpy (HAML) + Backbone.js + Undescore.js with Mustache templates (what a mess!)
Haml processing in hamlpy didn't exactly like:
%input{ :checked => {{isChecked}} ? true : None }
Or any similar thing. I got a Django hamlpy stacktrace.
I managed to hack it by using Mustache's inverted sections (see: http://mustache.github.com/mustache.5.html)
{#isChecked}
%input{:checked => 'true' }
{/isChecked}
{^isChecked}
%input{ ... without the checked attribute ... }
{/isChecked}
Anyway, hope that helps some poor Googler from wasting hours of their life force!