Knockout - array optimization

subscribe toastr

by johnpapa

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="http://codeseven.github.com/toastr/toastr.js"></script>
<link rel="stylesheet" href="http://codeseven.github.com/toastr/toastr.css">
<link rel="stylesheet" href="http://codeseven.github.com/toastr/toastr-responsive.css">
<button data-bind="click: addPeople">Add People</button>
<button data-bind="click: addPeopleBetter">Add People Better</button>
<ul data-bind="foreach: people">
    <li>
        <input data-bind="value: firstName" />
        <input data-bind="value: lastName" />
    </li>
</ul>

JavaScript

var Person = function() {
    var self = this;
    self.firstName = ko.observable();
    self.lastName = ko.observable();
    return self;
};

var vm = (function(ko, toastr) {
    var
    people = ko.observableArray(),
        addPeople = function() {
            people.push(new Person().firstName('Madelyn').lastName('Johnson'));
            people.push(new Person().firstName('Landon').lastName('Smith'));
            people.push(new Person().firstName('Ella').lastName('Jones'));
            people.push(new Person().firstName('Haley').lastName('Doe'));
        },
        addPeopleBetter = function() {
            var underlyingArray = people();
            underlyingArray.push(new Person().firstName('Madelyn').lastName('Johnson'));
            underlyingArray.push(new Person().firstName('Landon').lastName('Smith'));
            underlyingArray.push(new Person().firstName('Ella').lastName('Jones'));
            underlyingArray.push(new Person().firstName('Haley').lastName('Doe'));
            people.valueHasMutated();
        };

    // start us off
    people.push(new Person().firstName('Scott').lastName('Guthrie'));

    people.subscribe(function() {
        toastr.info('People changed. Now has ' + people().length + ' records');
    });


    return {
        people: people,
        addPeople: addPeople,
        addPeopleBetter : addPeopleBetter 
    }
})(ko, toastr);

ko.applyBindings(vm);