Bind a model to a HTML table that has been initially populated by the server

Issue

I want to bind a HTML table to a model so that - when a http push notification is received from the server - the table is automatically updated.

However, I need the server to generate the initial page and the JavaScript MVC/MVVM framework would generate it's initial model from the rendered table + any needed annotations. From this point on, the UI and model are in sync and any subsequent notifications from the server would change the models and flow naturally to the table.

I've tried many JavaScript MVC/MVVM frameworks, such as AngularJS and Knockout.js, but they seem to assume an approach where the server will provide an HTML table template and the framework will populate the table in the client side via JavaScript.

Edit:

• Site should work with crawlers that don't support JavaScript
• Page content and URLs for "normal" users and crawlers should be identical

Solution

Generally, knockout doesn't like the idea of generating full HTML in server side. But it doesn't mean that it is not possible. I am currently working on the same problem. You can use the petemplate binding offered on my blog here. It is a special template binding that doesn't regenerate the generated HTML by server-side (The main problem that knockout has with server side HTML). You still have to define a template for knockout, you also have to send the data in JSON format via a hidden input. But the advantage is, you have knockout + SEO friendly design. It means in the first request, server sends a full HTML plus a hidden input, in the client, knockout will be activated without regenerating HTML. Next operations with the server can be handled by knockout using JSON and AJAX. Personally, I don't think sending the data in a hidden field along-side the HTML would be a bold overhead. Using the peTemplate is very similar to the original template binding of knockoutjs except for few data-annotation attributes. You can find more information in the link

Answered By - Siyamand