Test Knockout Rendering

by bakhshi

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<section id="app">
    <div id="container" data-bind="foreach:{data:rows, afterRender:rowRendered}">
        <div class="row">
            <input type="checkbox" data-bind="checked:selected"></input>
            <div class="item" data-bind="text:(val + ' @ ' + Date())"></div>
        </div>
    </div>
    <div class="buttons">
        <button id="Add" data-bind="click:add">Add</button>
        <button id="up-with-ko" data-bind='click:koUp'>Up with ko</button>
        <button id="up" data-bind="click:up">Up</button>
    </div>
    <div data-bind="foreach:{data:rows}">
        <div class="row">
            <input type="checkbox" data-bind="checked:selected"></input>
            <div class="item" data-bind="text:(val + ' @ ' + Date())"></div>
        </div>
    </div>
</section>

CSS

input[type="checkbox"] {
    float:left;
}
.row {
    height:40px;
}

JavaScript

"use strict";

var $ = document.querySelectorAll.bind(document);

var model = {
    rows: ko.observableArray([]),
    add: function () {
        this.rows.push({
            val: this.rows().length,
            selected: ko.observable(true)
        });
    },
    koUp: function () {
        var selected = this.getSelected();
        this.rows.splice(selected[0].index, 1);
        this.rows.splice(0, 0, selected[0].row);
    },
    getSelected: function () {
        var selected = [];
        this.rows().forEach(function (r, i) {
            if (r.selected.peek()) selected.push({
                row: r,
                index: i
            });
        });
        return selected;
    },
    up: function () {
        var selected = this.getSelected()[0];
        var row = selected.row;
        row.element.parentNode.insertBefore(row.element, $('#container .row')[1]);
        var rawRows = this.rows();
        rawRows.splice(selected.index, 1);
        rawRows.splice(1, 0, row);
    },
    rowRendered: function (parts, data) {
        parts.every(function (p) {
            if (p instanceof HTMLDivElement) {
                data.element = p;
                return false;
            }
            return true;
        });
        console.log('found:', data.element);
    }
};

for (var index = 0; index < 5; index++)
model.rows.push({
    val: index.toString(),
    selected: ko.observable(false)
});
ko.applyBindings(model, $('#app')[0]);