Question

I’m trying to use knockout for a fast template rendering of JSON data received from a request with jQuery.

Basically, I would load the page with already pre-rendered HTML content (so I can show the content, and if the user’s browser has the javascript disabled, I don’t pretend to have all the functions working but at least show the basic content).

The next time a user clicks the link, instead of reloading the page, I submit a get-request with Ajax and get some json back. That is the data I should render in the place of the old content.

The problem is really simple: I integrated the knockout template with my HTML markup but when the page loads after calling ko.applyBindings(myviewmodel) I get all the pre-rendered content removed. This is because my model doesn’t have any item to render.

Is there a way to use pre-rendered data for HTML requests and knockout templating for Ajax requests only?

Answer 1

Here is a fiddle demonstrating how a visible binding can show/hide templates. Note that if you deselect Knockout from the list on the left, the Welcome section still shows up properly. Click the button to mimick an ajax request, and see the template section show up.

A visible binding is a standard Knockout binding that controls whether a control displays or not. It looks like this:

<div data-bind="visible: welcome">

Where welcome is an observable property on your viewmodel.

If this still isn’t clear, I strongly recommend the Knockout Interactive Tutorials, they will cover this and other basic usage.