I'm learning knockout.js
and trying to use an afterRender callback to apply behaviour to elements.
I don't understand what these #text
elements are that show up in my console.log()
.
So UI looks like this:
Knockout binding like this:
<div id='categoriesTree' style="color:black">
<table class='categoriesEditor'>
<tbody data-bind="template: { name: 'itemTmpl', foreach:children, afterRender: myPostProcessingLogic2 }"></tbody>
</table>
</div>
Template:
<script id="itemTmpl" type="text/html">
<tr>
<td>
<div class="input-group cat-block" style="margin-left: 3px; margin-bottom: 12px;">
<label id="may-search-tags-lbl" style="background-color:beige;visibility:hidden;margin:0;">Category Name</label>
<input data-bind='value: Name' id="maynavsearchphrase" type="text" class="form-control"
placeholder="Category name" name="maynavsearchphrase"
value="" />
<div class="input-group-btn btn-grp-70 cat-meth-off">
<button id="may-nav-tags-search-btn" class="btn btn-default btnIcon may-tipped"
type="button" data-toggle="tooltip" title="Delete Category">
<i class="glyphicon glyphicon-remove"></i>
</button>
<button id="may-nav-search-search-btn" class="btn btn-default btnIcon may-tipped"
data-toggle="tooltip" title="Add subcategories"
data-bind='click: $root.addCategory'
type="button">
<i class="glyphicon glyphicon-expand"></i>
</button>
</div>
</div>
</td>
<td data-bind="visible: children().length">
<table>
<tbody data-bind="template: { name: 'itemTmpl', foreach: children }"></tbody>
</table>
</td>
</tr>
</script>
Callback function:
self.myPostProcessingLogic2 = function (elements) {
console.log(elements);
}
And then chrome dev tools console output:
What are the "text" elements in text
, tr
, text
? There is no text element that is a sibling of tr
. tbody
can only contain tr
's right?
If I drill into text I can see that it has an attribute of cells : HtmlCollection[2]
both nodes of which are td
. So it's almost like text = tr
but if thats the case then why am I getting 3 sibling nodes to represent one row?