ObservableArrays with CollectionViews

by seanmonstar

CSS

li {
    background: #eee;
    border:1px solid #666;
    margin:5px; 
    padding: 10px;
}

li:hover {
    background: #fafada;
    border-color:#111;
}

JavaScript

var Class = require('shipyard/class/Class');
var ObservableArray = require('shipyard/class/ObservableArray');
var View = require('shipyard/view/View');
var ListView = require('shipyard/view/ListView');

function rand() {
    return Math.round(Math.random() * 100000).toString(16);
}

var arr = new ObservableArray('Foo', 'Bar');
var CancerousView = new Class({
    Extends: View,
    onClick: function(e) {
        var index = arr.indexOf(this.get('content'));
        if (index >= arr.length / 2) {
            // remove
            arr.splice(index, 1);
        } else {
            // add!
            arr.splice(index, 0, rand());
        }
            
    }
});

var list = new ListView({ 
    itemView: CancerousView,
    content: arr
});
list.attach();