Anchor data binding inside a td - knockoutjs

Question

I am using KnockoutJS for a web application. A table is binded using foreach data binding and table columns are binded using text property. I have a column binding as follows -

<td data-toggle="tooltip" data-html="true" data-placement="top" data-
bind="html:codesAllopening,attr: {'data-original-title': 
AllOpeningCodeToolTip()}"></td>

codesAllopening is created dynamically using below code -

self.codesAllopening = ko.computed(function () {
    var codes = self.OpeningCode.Code() + '<a data-bind="click: function() {$root.cancelOpeningCode();}" style="cursor:default;"><i class="material-icons">close</i></a><br/>';

return codes;
}, self);

Here, click binding inside codesAllopening is not getting triggered.

Thanks for your help in advance.

adiga · Answer 1 · 2017-11-24T14:41:39.700

1

Any dynamically added HTML with knockout bindings after applyBindings() is called will not work. In your case, there is no need to use the html binding. You can add the anchor and a span to the td on load itself:

<td data-toggle="tooltip" data-html="true" data-placement="top" data- bind="attr: {'data-original-title': AllOpeningCodeToolTip()}">
    <span data-bind="html:$parent.OpeningCode.Code"></span>
    <a data-bind="click: $root.cancelOpeningCode" style="cursor:default;"><i class="material-icons">close</i></a><br/>
</td>

There are some good solutions in this question for using custom binding handlers

edited Nov 24 '17 at 14:41

answered Nov 24 '17 at 14:23

adiga

34,372
9
61
83

Thank you for your quick response. But OpneingCode have many codes and I want to have cancel icon for each code separately. Thats why I am trying to put anchor via javascript code. – Raj Nov 24 '17 at 14:28
@Raj Does the string returned by `OpeningCode.Code()` also have knockout bindings? – adiga Nov 24 '17 at 14:32
No. It returns plain string. – Raj Nov 24 '17 at 14:34
@Raj string containing HTML tags or just plain text? – adiga Nov 24 '17 at 14:35
HTML tags. Actually a tag is added to show list of codes. – Raj Nov 24 '17 at 14:36
@Raj Then instead of `text` binding, use `html` bindg for the span: `` should work. – adiga Nov 24 '17 at 14:37
No sir. It doesn't work. My problem is not with displaying the codes but adding the cancel button to each code. In code snippet above, inside self.codesAllopening I am trying to put anchor tag and that tag is working fine if I don't use data-bind but doesn't work with data-bind click/href events. – Raj Nov 24 '17 at 14:47
@Raj The above code should work. [Here's a fiddle](https://jsfiddle.net/1kqypu9t/) to test – adiga Nov 24 '17 at 14:59

score 1 · Accepted Answer · answered Nov 24 '17 at 14:27

1

data-bind is parsed when you applyBindings so ko will not parse this since its added later.

knockout data-bind on dynamically generated elements

answered Nov 24 '17 at 14:27

yoel neuman

133
7

ok..thank you. I will try to work through the options provided on above link. – Raj Nov 24 '17 at 14:44
I went through the [link](https://stackoverflow.com/questions/11066732/knockout-data-bind-on-dynamically-generated-elements) provided above and resolved using `ko.bindingHandlers['html'] = { //'init': function() { // return { 'controlsDescendantBindings': true }; // this line prevents parse "injected binding" //}, 'update': function (element, valueAccessor) { // setHtml will unwrap the value if needed ko.utils.setHtml(element, valueAccessor()); } };` – Raj Nov 27 '17 at 05:53

Anchor data binding inside a td - knockoutjs

2 Answers2