Show HN: Spellbinder, real-time view/model binding for backbone.js

Pretty sweet. And an interesting implementation: <a href="https://github.com/mattinsler/spellbinder/blob/master/src/spellbinder.coffee" rel="nofollow">https://github.com/mattinsler/spellbinder/blob/master/src/sp...</a> (although more comments would be lovely). For prior art, see:<p><a href="http://rivetsjs.com" rel="nofollow">http://rivetsjs.com</a><p><a href="http://nytimes.github.io/backbone.stickit/" rel="nofollow">http://nytimes.github.io/backbone.stickit/</a><p>But I have to say, that "example" is a pretty puffed up strawman. Most of the time, the real comparison is this:<p><pre><code> &#60;p data-bind="count; [class:high-value] count &#62; 100; [class:low-value] count &#60; 50"&#62;&#60;/p&#62; </code></pre> To this:<p><pre><code> &#60;p class="&#60;%= count &#62; 100 ? 'high-value' : (count &#60; 50 ? 'low-value' : '') %&#62;"&#62;&#60;/p&#62;</code></pre>

Nothing against the author at all, this seems like a cool little project, but I would never want to inline that much anything on a large project. Inlining things like that takes the maintainability and throws it out the window.

isn't there a way to solve this with CSS3?<p>or at the very least, at the LESS/SCSS level?