Backbone: Can't Pass "data-" attributes within View's Attributes method
I am a fan of setting attributes within a view as such...
Backbone.View.extend({
attributes: {
data-attr: 'mydata'
}
});
... however, this throws an error due to the hyphen in the key "data-attr".
Uncaught SyntaxError: Unexpected token -I realize this is an illegal token in a JavaScript key-value object, however I was hoping Backbone offered some work around for this, given the fact that passing data attributes is one of the most likely scenarios. I have been working around it by setting the attribute within the render function using jQuery:
render: function () {
this.$el.attr( 'data-attr', 'mydata"');
}
This works, but I thought to ask if there is another option.
ghost
All 8 comments
Yep -- it's just a JavaScript object. Use quoted keys.
attributes: {
"data-attr": "mydata"
}
jashkenas
on 3 Oct 2012
Ahh, I thought I tried that! Thanks!
ghost
on 3 Oct 2012
What do you suggest for passing a data attribute to the View's DOM element from the attributes within the View's Model? As such...
attributes: {
"data-attr": this.model.foo
}
I am losing scope for reference to "this".
Uncaught TypeError: Cannot read property 'model' of undefined
ghost
on 3 Oct 2012
You can use a function like so:
attributes: function() {
return {
'data-attr': this.model.foo
};
}
braddunbar
on 3 Oct 2012
Awesome. That works perfectly. Thank you for the prompt responses!
ghost
on 3 Oct 2012
You're welcome, but in the future, please don't use the bug tickets for tech support like this -- try the IRC channel or the mailing list first.
jashkenas
on 3 Oct 2012
Happy to. I tried that first, but there is only one other user in DocumentCloud IRC, Turjakas who was not responding.
ghost
on 3 Oct 2012
Must've mistyped -- there are 242 folks in #documentcloud on freenode right now.
jashkenas
on 4 Oct 2012
Related issues
rafde
·
9Comments
omenking
·
10Comments
rubiii
·
12Comments
jashkenas
·
7Comments
chaimpeck
·
8Comments
Most helpful comment
You can use a function like so: