How to use the html binding?

Question

I encounter a problem when using the html binding in knockoutjs. In the viewModel.maintable() I have:

this.layerDetails = ko.observable("");

In a function that I add some html in the above attribute:

viewModel.maintable().layerDetails(viewModel.maintable().layerDetails() + "<a href='#' data-bind='click:function(){viewModel.refreshPage(true)}'>link</a>");

Also in html part:

<div data-bind='html: layerDetails'>a</div>

However, I can't trigger the refreshPage function. Did I write the wrong code?

Answer 1

The html binding will not hook up any data-bind attributes. You really have a couple of choices to make this work.

1- use the template binding instead of html. Create a template with your content and Knockout will manage adding/removing DOM elements and hooking up the data-binds.

2- call ko.applyBindings(yourViewModel, theNewRootElement) after setting the layerDetails value. So, you would pass in the data that you want bound and the root of any new elements that were created.