Dynamic component loading

by Jorge Bustos Pereda

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
     Here's a widget, declared inline:
      <like-widget></like-widget>
    
      <button id='btnAdd'>Add a new widget to the grey box:</button>
      <br/><br/>
    
      <div id='addZone' class="well">
        Widgets will be appended here
      </div>
    
      <p>When you run this code, the widget custom element is indeed added to the box (see source) but the widget's template is not bound, so nothing appears. How do I get it to bind/appear?</p>

JavaScript

ko.components.register('like-widget', {
    template: '<div class="alert alert-info">This is the widget</div>'
  });

ko.applyBindings()

$('#btnAdd').on('click', function() {
    var $newWidget = $('<like-widget>');
    $('#addZone').append($newWidget);
    ko.applyBindings({},$newWidget[0]);
});