Knockout Example

Knockout Example for Presentation

by Troy Alford

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="http://cdnjs.com/libraries/knockout.mapping"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<div class="collapser">
    <i class="icon-close"></i>
    <textarea id="raw_json" data-bind="value: flatten"></textarea>
</div>

CSS

.collapser {
    display: block;
    padding: 5px;
}
#raw_json { display: block; }

JavaScript

var model = {
    tasks: [{
        id: 1,
        title: 'Go to the grocery store.',
        complete: false
    }]
};

var viewModel = ko.mapping.fromJS(model);
viewModel.flatten = ko.calculated() {
    return ko.mapping.toJS(viewModel);
};

ko.applyBindings(viewModel);