Ember list view

by rsaccon

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.min.js"></script>
<script src="https://raw.github.com/gist/1626943/8a19fd79e96e9e78d8b2c8396ea6b4e4c879a759/UI.ListView.js"></script>
<script type="text/x-handlebars">
    <div style="width: 100px; height: 200px;">
    {{view UI.ListView contentBinding="App.products" id="super12" valueBinding="App.controller.listValue" mode="multi"}}
    </div>
</script>

CSS

.ember-listview
{
    margin: 0;
    padding: 0;
    outline: none;
    cursor: default;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.ember-listview .ember-listview-item
{
    border: 1px solid #ffffff;
}
.ember-listview .selected {
    background-color: #222288;
    color: #FFFFFF;
    border: 1px solid #000088;
}
.ember-listview .head
{
    border: 1px solid #ff0000 !important;
}

JavaScript

App = Ember.Application.create();
App.products = Em.ArrayController.create({
    content: [{id: 1, name: "Product 1"}, { id: 2, name: "Product 2" }, { id: 3, name: "Product 3"}, { id: 4, name: "Product 4"}]
});
App.controller = Em.Object.create({
    listValue: [1]
});