knockout-templating

Is there a way to configure a Knockout component to replace the container element instead of nesting its content inside the container element? For example, if I have a custom component registered as my-custom-element with the following template: <tr> <p>Hello world!</p> </tr> Is it possible to use the component like this: <table> <tbody> <my-custom-element></my-custom-element> </tbody> </table> And have the final product be this: <table> <tbody> <tr> <p>Hello world!</p> </tr> </tbody> </table> Instead of this: (the way Knockout renders components by default) <table> <tbody> <my-custom-element>

I've been searching for a while, and I'm pretty confident this is a new question, and not a repeat like the title suggests. :) Basically, I'm trying to find out if there is a subscribe-able event that KnockoutJS creates after a template render when using something like jQuery templates. I'd use the built-in "afterRender" but I found out that it doesn't fire if the observable array is cleared. I built this demo to illustrate that problem: http://jsfiddle.net/farina/YWfV8/1/ . Also, I'm aware that I could write a custom handler...but that seems really unnecessary for what I need. I just want one

is it possible to use an external Template in KnockoutJS like this? <script type="text/html" id="a_template" src="templates/a_template.html"> </script> I've tried this solution but didn't get it working. You could also look at: https://github.com/ifandelse/Knockout.js-External-Template-Engine You can use jquery to dynamically load html into a script element, and then execute knockout based on that. <script type="text/html" id="template_holder"></script> <script type="text/javascript"> $('#template_holder').load('templates/a_template.html', function() { alert('Load was performed.'); //knockout

I cannot see what is wrong here but the image does not display using the following Knockout template: <script type="text/html" id="legend-template"> <div><input type="checkbox" data-bind="click : doSomething" ></input> <img width="16px" height="16px" data-bind="src: 'imagePath'" /> <span data-bind="text : label"> </span> </div> </script> The object this is being bound to looks like this: tut.myObject= function (imagePath, label) { this.label = ko.observable(label); this.imagePath = ko.observable(imagePath || liveString + '/Content/images/marker.png'); }; tut.myObject.prototype = { doSomething: