observe in helper

by rwaldin

HTML

<script src="http://canjs.com/release/latest/can.zepto.js"></script>
<script src="http://canjs.com/release/latest/can.view.mustache.js"></script>
<script src="http://canjs.com/release/latest/can.construct.super.js"></script>
<script src="http://canjs.com/release/latest/can.observe.attributes.js"></script>
<div id="container"></div>

<script id="template" type="text/mustache">
    <h2>test passing param to element helper</h2>
    <ul>
        <li {{! elementHelper observeList }}>observeList broken</li>
        <li {{! elementHelper classnames=observeList }}>observeList in hash broken</li>
    </ul>
</script>

CSS

#container {
    margin: 20px;
    font: 18px sans bold;
}
#container li {
    color: red;  
    font: 16px sans normal;
}
#container li.foo.bar.baz {
    color: green;
}
ul {
    list-style: disc inside;
    margin-bottom: 10px;
}

JavaScript

(function() {
    can.Mustache.registerHelper('elementHelper', function(classnames, options) {
        if (!options) {
            options = classnames;
            classnames = options.hash.classnames;
        }
        return function(el) {
            if (can.isFunction(classnames)) {
                classnames = classnames();
            }
            classnames.forEach(function(classname) {
                can.addClass(can.$(el), classname);
            });
        };
    });
    
    can.Control('Control', {
        init: function(element, options) {
            can.append(element, can.view(options.view, options.model));
        }
    });
    
    var array =  ['foo', 'bar', 'baz'];
    
    new Control('#container', {
        model: {
            observeList: new can.Observe.List(array)
        },
        view: 'template'
    });
}());