Durandal / Knockout - Creating viewModel from server data prior to bindings

Question

Sorry as this questions is mainly Knockout, but is in Durandal so the viewModel and some bindings my not look familiar to ko anwser contributors.

Basically my view is comprised of a table that renders server data:

view.html

<table class="table">
    <tr>
        <td>Company</td>
        <td data-bind="text: Company"></td>
    </tr>
    <tr>
        <td>First Name</td>
        <td data-bind="text: FirstName"></td>
    </tr>
    <tr>
        <td>Last Name</td>
        <td data-bind="text: LastName"></td>
    </tr>
</table>

I am on ASP.net so of course I use signalR to get my server data which represents each value in the table. This is an asynchronous call so it does not block the Durandal Composition callback which will do the Knockout bindings.

viewModel.js

define(['services/logger', 'global/session', 'jquery', 'knockout', 'knockout-mapping', 'hubs'],

function ($, ko, komapping) {
    ko.mapping = komapping; // Needed
    var myChildModel = function (Id) {
        this.activate = function () {
            $.connection.hub.start().done(function () {
                con.server.getDetails(Id).done(function (data) {
                    ko.mapping.fromJS(data, {}, this);
                    console.log(data);
                });
            });
        };
    };
    return myChildModel;
});

I REALLY want to take the server return and map it into the viewModel itself as shown above as I can then account for changes in the data on the server-side automatically (not included or relevant at this point), but as the viewModel does not exist prior to the binding callback

Causing the expected error:

Unable to process binding "text: function (){return Company }" Message: Company is not defined; View: widgets/customerInfo; ModuleId: widgets/customerInfo

To negate this issue I want to stop the Knockout applyBindings, then call it manually on my server return .done call back.

The Durandal docs do say you can stop the bindings, but does not include an example how or whether it is possible to have it apply the bindings manually when you want.

Durandal Docs

Has anyone been able to deploy this technique before, maintaining the viewModel comes from the server, and is not created then hydrated after, or has deployed a similar technique with the same outcome.

PW Kad PW Kad · Accepted Answer · 2014-09-10T03:42:54

This seems like a trivial problem to solve but why not just add a conditional if above it?

<table class="table" data-bind="if: isLoaded">
    <tr>
        <td>Company</td>
        <td data-bind="text: Company"></td>
    </tr>
    <tr>
        <td>First Name</td>
        <td data-bind="text: FirstName"></td>
    </tr>
    <tr>
        <td>Last Name</td>
        <td data-bind="text: LastName"></td>
    </tr>
</table>

and just set isLoaded to false until your data is loaded async?

Durandal / Knockout - Creating viewModel from server data prior to bindings

1 Answers