title: How to load a KnockoutJS component programmatically
body: <p>I'm starting to create a ko component for select2 called "select-two", but I realize soon after that I sometimes need to load components after bindings have been registered creating the component programmatically.</p>
  
  <p>I've tried apending a new element but of course it doesnt work, I'm guessing it has to be rebinded.</p>
  
  <pre><code>var sel2 = $("&lt;select-two&gt;&lt;/select-two&gt;") ;
  $("#selectList").append(sel2) ; 
  </code></pre>
  
  <p>There's lot of reference on how to rebind the whole viewmodel, but only just the component? I think this guy has the same problem:
  <a href="https://stackoverflow.com/questions/29367285/load-knockoutjs-component-using-javascript">Load knockoutjs component using javascript</a></p>
  
  <p>Just for reference this is the component code:</p>
  
  <pre><code>define([
  'knockout',
  'text!./select-two.html',
  'select2'
  ], function (ko,  templateMarkup, select2) {
  ko.components.register('select-two', {
      viewModel: function(params) {
  
          var placeholder = params.placeholder;
          var value = params.value;
  
          ko.bindingHandlers.select2 = {
              init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
                  $(element).select2({
                          placeholder: placeholder,
                          minimumInputLength: 1,
                          ajax: {
                              url: function (term, page) {
                                  return '/models/autores/busqueda/' + term['term']
                              },
                              dataType: 'json',
                              quietMillis: 200,
                              processResults: function (data) {
                                  return data;
                              }
                          },
                          dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
                      }
                  ).on('change', function(event){
                          ds = $(element).select2('data')[0] ;
  
                          value['id'](ds['id']) ;
                          value['text'](ds['text']) ;
                      });
              }
          };
          return{
          }
      },
      template: templateMarkup
  });
  });
  </code></pre>
  
  <p>my template:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="/assets/js/vendor/select2/dist/css/select2.css" /&gt;
  &lt;select class="form-control" data-bind="select2"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>and how I load it:</p>
  
  <pre><code>&lt;select-two id="authorSelect" params="placeholder: 'Pick an Author', value: autorSelectData" &gt;&lt;/select-two&gt;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>ko.bindingHandlers.select2 = {
     init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var params = ko.unwrap(valueAccessor());
        $(element).select2({
           placeholder: params.placeholder,
           minimumInputLength: 1,
           data: params.data
         }).on('select2:select', function(e) { 
          params.value(e.params.data.text);
         });
        $(element).select2('val', params.value); // set initial value
     }
  };
  
  ko.components.register('select-two', {
    viewModel: function(params) {
      this.value = params.value;
      this.data = params.data;
    },
    template: '&lt;select class="form-control" style="width: 200px;" data-bind="select2: ' + 
              '{placeholder: \'Pick a fruit\', value: value, data: data}"&gt;' +
              '&lt;/select&gt;'
  });
  
  var app = {
    newSelect: function(){
      var cont = $("&lt;p&gt;&lt;/p&gt;") ; 
      var sel2 = $("&lt;select-two&gt;&lt;/select-two&gt;") ; 
      ko.applyBindings({}, sel2[0]) ;
      cont.append(sel2) ; 
      $("#select-list").append(cont) ; 
      
    },
    autorSelectData: ko.observable(null), 
    options: ['apple','pear','peach','mango','grape']
  };
  
  ko.applyBindings(app);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"&gt;&lt;/script&gt;
  Just the binding: &lt;select class="form-control" style="width: 200px;"
          data-bind="select2: {placeholder: 'Pick a fruit', value: autorSelectData, data: options}"&gt;
  &lt;/select&gt;&lt;br&gt;
  With component: &lt;select-two params="value: autorSelectData, data: options"&gt;&lt;/select-two&gt;
  
  &lt;p&gt;Adding Selects&lt;/p&gt;
  &lt;div id="select-list"&gt;
    
  &lt;/div&gt;
  
  &lt;input type="button" data-bind="click: newSelect()" value="New Select" id="new-select" /&gt;</code></pre>
  </div>
  </div>
  </p>