knockout

by vivaxy

HTML

<form data-bind="submit: getMessages">Name:
    <input data-bind="value: name" />
    <button type="submit">Get messages</button>
</form>
<div data-bind="with: resultData">
     <h3>Recent messages fetched at <span data-bind="text: retrievalDate"> </span></h3>

    <ol data-bind="foreach: messageList">
        <li data-bind="text: text"></li>
    </ol>
    <button data-bind="click: $parent.clearResults">Clear messages</button>
</div>

JavaScript

function AppViewModel() {
    var self = this;
    self.name = ko.observable('@example');
    self.resultData = ko.observable(); // No initial value

    self.getMessages = function () {
        var name = self.name();
        var simulatedResults = [{
            text: name + ' What a nice day.'
        }, {
            text: name + ' Building some cool apps.'
        }, {
            text: name + ' Just saw a famous celebrity eating lard. Yum.'
        }];

        self.resultData({
            retrievalDate: new Date(),
            messageList: simulatedResults
        });
    }

    self.clearResults = function () {
        self.resultData(undefined);
    }
}

ko.applyBindings(new AppViewModel());