Knockout - Apply seperate view models to specific parts of a view

by JasonMore

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/knockout.mapping.js"></script>
<ul data-bind="foreach:users">
    <li>
        <p data-bind="text:firstname "></p>
        <p data-bind="text:lastname "></p>
        <p data-bind="text:fullname "></p>
    </li>
</ul>

JavaScript

function User(data) {
    this.firstname = ko.observable(data.firstname);
    this.lastname = ko.observable(data.lastname);
    this.fullname = ko.computed(function() {
        return this.firstname() + " " + this.lastname();
    }, this);
    this.userfunctions = ko.observable(data.userfunctions);
    this.phonework = ko.observable(data.phonework);
    this.phonemobile = ko.observable(data.phonemobile);
    this.email = ko.observable(data.email);
    this.editurl = ko.observable(data.editurl);
}

function UserListViewModel() {
    var self = this;
    self.users = ko.observableArray([]);

    self.users.loading = ko.observable(false);

    self.users.loading(true);
    $.getJSON("/echo/json/", {
        requestType: "userList",
        pageId: '12',
        companyId: '1',

        //jsfiddle return data
        json: [{
            firstname: 'foo',
            lastname: 'bar'}],
        delay: 1
    }, function(allData) {
        var mappedUsers = $.map(allData, function(item) {
            return new User(item);
        });
        self.users(mappedUsers);
        self.users.loading(false);
    });
}

ko.applyBindings(new UserListViewModel());