I'm using knockout to dynamically loading content into parts of the page, using the HTML binding.

the problem is that the html I want to bind has to do call a function onclick and I need the information about the target and the data that knockout easily send.

something like this:

myFunction($parent, $data)

HTML:

<table>
    <tbody data-bind="foreach: rows" >
        <tr>
            <td data-bind="html: rowValue">this will be a link</td>
        </tr>
   </tbody>
</table>

Later I set the value to be a link with a knockout binding inside:

rowValue("<a href='#' data-bind=click:alert('hello')" + result.Data + "</a>");

Please check the fiddle here to see the full working code.

You can see the difference between the 2 lines I wrote, if I do a javascript onclick it works, but obviously ko is missing a late binding.

I've seen many questions about this but can't find one with a definitive answer.

I want to do this with KO, how can this be acplished? with templates maybe?

I'm using knockout to dynamically loading content into parts of the page, using the HTML binding.

the problem is that the html I want to bind has to do call a function onclick and I need the information about the target and the data that knockout easily send.

something like this:

myFunction($parent, $data)

HTML:

<table>
    <tbody data-bind="foreach: rows" >
        <tr>
            <td data-bind="html: rowValue">this will be a link</td>
        </tr>
   </tbody>
</table>

Later I set the value to be a link with a knockout binding inside:

rowValue("<a href='#' data-bind=click:alert('hello')" + result.Data + "</a>");

Please check the fiddle here to see the full working code.

You can see the difference between the 2 lines I wrote, if I do a javascript onclick it works, but obviously ko is missing a late binding.

I've seen many questions about this but can't find one with a definitive answer.

I want to do this with KO, how can this be acplished? with templates maybe?

• javascript
• html
• knockout.js
• knockout-2.0

Share Improve this question Follow edited Jul 8, 2013 at 10:59 Athari 34.3k1717 gold badges110110 silver badges152152 bronze badges asked Jul 8, 2013 at 9:06 Maurizio In denmarkMaurizio In denmark 4,28422 gold badges3232 silver badges6666 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

KO applies bindings when you call ko.applyBindings. So if you modify the dom after applyBindings has been called. KO won't be aware of the new dom element.

You can use template this way :

<table>
    <tbody data-bind="foreach: sitesTable.rows" >
        <tr data-bind="foreach: row">
            <td data-bind="template: 'myTemplate' "></td>
        </tr>
    </tbody>
</table>

<br/>


<a href="#" onclick="getNewData()"> click here </a>
<script id="myTemplate" type="text/html">
    <a href='#' data-bind="html: cellValue, click: openAlert"> click </a>
</script>

edit by Maurizio. Use this fiddle as the other linkseems to be broken: See fiddle

You can roll your own version of the html: binding that evaluates any bindings in the HTML that you bind... if you get me.

E.g. see https://stackoverflow./a/20821523/188926

Usage:

<td data-bind="bindHTML: rowValue"></td>