Knockoutjs.com - Simple list example

http://knockoutjs.com/examples/simpleList.html

by Rajesh Sitaraman

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div class='liveExample'>
     <h2>Comments:</h2>

    <div data-bind="foreach: comments">
        <p data-bind="text: $data.comment"></p>
        <p data-bind="text: $data.date"></p>
        <hr/>
    </div>
    <button data-bind="click: addComment">Add</button>
    <button onclick="loadMore()"> Add more</button>
</div>

CSS

body {
    font-family: arial;
    font-size: 14px;
}
.liveExample {
    background-color: #EEEEDD;
    border: 1px solid #CCC;
    max-width: 655px;
}
.liveExample h2 {
    padding: 1em;
    font-weight: bold;
}
.liveExample p {
    padding-left: 2em;
    margin-top: 0.9em;
    margin-bottom: 0.9em;
}

JavaScript

var  AppViewModel = function () {
    var self = this;
    self.comments = ko.observableArray([]);

    /*self.comments = ko.observableArray(
    [{
        comment: 'Lengthy long statement with multiple lines of text for testing the width',
        date: '7/7/2015'
    }, {
        comment: 'Charles',
        date: '7/6/2015'
    }, {
        comment: 'Denise',
        date: '7/5/2015'
    }]);*/

    self.addComment = function () {
        self.comments.push({
            comment: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ",
            date: new Date()
        });
    };

    self.addMoreComment = function (modified, sComment) {
        self.comments.push({
            comment: sComment,
            date: modified
        });
    };
};

var commentsList = new AppViewModel();
ko.applyBindings(commentsList);

var loadMore = function () {
    commentsList.addMoreComment(new Date(), "Lorem Ipsum");
}