Question

I’m using knockoutjs basically for form validation on my site.

The thing is that I prefer to have the dynamic data being sent inside the page, instead of loading it with ajax (I see no point in doing an additional request, if I can already send the data on the html).

The problem is that I would have to “reverse engineer” content on the page that was sent from the server to populate my knockoutjs models. I’m doing it like this (model is a User and I have an html table with all my users on the page):

// Handler to prepopulate my viewmodel (list of users) with data from the page
ko.bindingHandlers.populateUsersFromTable = {
    init:function (element, valueAcessor, allBindingsAccessor, viewModel) {
        var collection = valueAcessor(),
            tableRows = $(element).find("tbody > tr"),
            numberOfRows = tableRows.length,
            tableCells,
            user,
            i;

        for (i = 0; i < numberOfRows; i++) {
            tableCells = $(tableRows[i]).children("td");
            user = new User({
                name:$(tableCells).find(".user-name").text(),
                email:$(tableCells).find(".user-email").text(),
                clt_pj:$(tableCells).find(".user-clt_pj").text(),
                admin:$(tableCells).find(".user-admin").text(),
                blacklisted:$(tableCells).find(".user-blacklisted").text(),
                fired:$(tableCells).find(".user-fired").text()
            });
            collection.push(user);
        }
    }
}

// User Model/ViewModel
function User(u) {
    var self = this;
    // data
    self.name = ko.observable(u.name || '');
    self.email = ko.observable(u.email || '');
    self.clt_pj = ko.observable(u.clt_pj || '');
    self.admin = ko.observable(u.admin || false);
    self.blacklisted = ko.observable(u.blacklisted || false);
    self.fired = ko.observable(u.fired || false);

    // view
    self.selected = ko.observable(false);
}

It works, but I don’t see it as a good solution as the code is dependent on the UI.

What would be a better approach of doing this?

Answer 1

The standard way is instead of having the server populate the HTML on the page, just have the server turn the model into JSON that is sent with the page. It’s still all in the original request, and in many cases its actually smaller since JSON is a very compact format (this is especially true of large select lists).

For example, if you were using ASP.MVC you could put this at the bottom of your view (any server tech will allow you to do this, if you are using something else just let me know, and I’ll add that example instead):

var initialData = @Html.Raw(Json.Encode(Model));

Then later use that data to initialize your viewmodel, which could look like this:

ko.applyBindings(new ViewModel(initialData));

Then knockout will take care of the HTML via binding.