

Show HN: Spellbinder, real-time view/model binding for backbone.js - mattinsler
https://github.com/mattinsler/spellbinder

======
jashkenas
Pretty sweet. And an interesting implementation:
[https://github.com/mattinsler/spellbinder/blob/master/src/sp...](https://github.com/mattinsler/spellbinder/blob/master/src/spellbinder.coffee)
(although more comments would be lovely). For prior art, see:

<http://rivetsjs.com>

<http://nytimes.github.io/backbone.stickit/>

But I have to say, that "example" is a pretty puffed up strawman. Most of the
time, the real comparison is this:

    
    
        <p data-bind="count; [class:high-value] count > 100; [class:low-value] count < 50"></p>
    

To this:

    
    
        <p class="<%= count > 100 ? 'high-value' : (count < 50 ? 'low-value' : '') %>"></p>

~~~
mattinsler
With one exception. Spellbinder will add/remove classes as the model value is
changed. It does the initial rendering and then will alter the html, style,
classes, properties on the fly as you change the values in the model without
reloading the page or re-rendering the view.

~~~
rraval
Even so, the example is a tad puffed up:

    
    
        if (count > 100) {
          $el.removeClass('low-value');
          $el.addClass('high-value');
        } else if (count < 50) {
          $el.removeClass('high-value');
          $el.addClass('low-value');
        } else {
          $el.removeClass('high-value');
          $el.removeClass('low-value');
        }
    

Compare to how this would normally be written:

    
    
        $el.toggleClass('high-value', count > 100);
        $el.toggleClass('low-value', count < 50);

~~~
mattinsler
Nice code, I'll update the readme to be more realistic.

------
JesseObrien
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.

~~~
mattinsler
The main reason to write it into the HTML was to be more maintainable, by
putting the presentation in the HTML presentation layer. Most libraries, such
as rivets do very similar things for very similar reasons. When I know there's
a data formatting issue in 1 element in the HTML, I can just fix that in the
HTML. I don't need to go into the javascript and find which jquery snippet
changes that HTML element and does the formatting.

~~~
calebio
Personally I would hate large amounts of logic in my attributes like that. I
much think that properly formatted and structured JavaScript solves this
problem much better. Especially when the same logic applies to two elements
and you can create a function for it.

~~~
mattinsler
Rivets actually does a great job allowing you to create functions for similar
formatting, which allows you to have very very short attributes, which in turn
ends up being multiples of lines less than the equivalent javascript.

------
hayksaakian
isn't there a way to solve this with CSS3?

or at the very least, at the LESS/SCSS level?

