Building a Chat Web App With Signal R, Part 2: Listing 5

The KnockOut peopleViewModel.

 function peopleViewModel() {
    people(mappedPeople);    this.hub = $.connection.personHub;
}    this.people = ko.observableArray([]);
    this.newPersonFirstName = ko.observable();
    this.newPersonLastName = ko.observable();
    this.newPersonEmail = ko.observable();
    var people = this.people;
    var self = this;
    var notify = true;

    this.init = function () {

    this.hub.client.allPeopleRetrieved = function (allPeople) {
        var mappedPeople = $.map(allPeople, function (person) {
            return new personViewModel(person.Id, person.FirstName,
                person.LastName, person.Email, self)


    this.hub.client.personUpdated = function (updatedPerson) {
        var person = ko.utils.arrayFilter(people(),
            function(value) {
                return == updatedPerson.Id;
        notify = false;
        notify = true;

    this.hub.client.raiseError = function (error) {

    this.hub.client.personCreated = function (newPerson) {
        people.push(new personViewModel(newPerson.Id, newPerson.FirstName, newPerson.LastName,
            newPerson.Email, self));

    this.hub.client.personRemoved = function (id) {
        var person = ko.utils.arrayFilter(people(), function(value) {
            return == id;

    this.createPerson = function () {
        var person = { firstName: this.newPersonFirstName(), lastname: this.newPersonLastName(), email: this.newPersonEmail() };
        this.hub.server.add(person).done(function () {
            console.log('Person saved!');
        }).fail(function (error) {
    this.deletePerson = function (id) {

    this.updatePerson = function (person) {
        if (notify) {

About the Author

Eric Vogel is a Senior Software Developer for Red Cedar Solutions Group in Okemos, Michigan. He is the president of the Greater Lansing User Group for .NET. Eric enjoys learning about software architecture and craftsmanship, and is always looking for ways to create more robust and testable applications. Contact him at [email protected].

comments powered by Disqus


  • Death of the Dev Machine?

    Here's a takeaway from this week's Ignite 2020 event: An advanced Azure cloud portends the death of the traditional, high-powered dev machine packed with computing, memory and storage components.

  • COVID-19 Is Ignite 2020's Elephant in the Room: 'Frankly, It Sucks'

    As in all things of our new reality, there was no escaping the drastic changes in routine caused by the COVID-19 pandemic during Microsoft's big Ignite 2020 developer/IT pro conference, this week shifted to an online-only event after drawing tens of thousands of in-person attendees in years past.

  • Visual Studio 2019 v16.8 Preview Update Adds Codespaces

    To coincide with the Microsoft Ignite 2020 IT pro/developer event, the Visual Studio dev team shipped a new update, Visual Studio 2019 v16.8 Preview 3.1, with the main attraction being support for cloud-hosted Codespaces, now in a limited beta.

  • Speed Lines Graphic

    New for Blazor: Azure Static Web Apps Support

    With Blazor taking the .NET web development world by storm, one of the first announcements during Microsoft's Ignite 2020 developer/IT event was its new support in Azure Static Web Apps.

  • Entity Framework Core 5 RC1 Is Feature Complete, Ready for Production

    The first release candidate for Entity Framework 5 -- Microsoft's object-database mapper for .NET -- has shipped with a go live license, ready for production.

Upcoming Events