on click add item and make div scrollable

by Kheema Pandey

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
<div id='d1'>
    <ul data-bind="foreach: items">
        <li> <span data-bind="text: Name"></span>

        </li>
    </ul>
</div>
<br />
<input type="text" data-bind="value: newItem" />
<button data-bind="click: addNewItem">add</button>

CSS

*{
    margin: 0px;
    padding: 0px;
}

ul{
    white-space:nowrap;
    overflow:auto;
}
ul li {
    display: inline-block;
    background-color: #444;
    color: #fff;
    height: 30px;
    line-height: 30px;
    padding: 10px 30px;
}

JavaScript

var ViewModel = function () {
    var items = ko.observableArray();
    var newItem = ko.observable();

    var activate = function () {
        items.push({
            "Name": "Tim"
        });
        items.push({
            "Name": "Jon"
        });
        items.push({
            "Name": "Dan"
        });
    };

    var addNewItem = function () {
        items.push({
            "Name": newItem()
        });
    };

    return {
        items: items,
        activate: activate,
        newItem: newItem,
        addNewItem: addNewItem
    };
};
var vm = new ViewModel();
vm.activate();

ko.applyBindings(vm);