如何以编程方式加载KnockoutJS组件

我开始为select2创建一个名为"select-two"的ko组件，但我很快意识到，我有时需要在绑定注册后加载组件，以编程方式创建组件。

我试过添加一个新元素，但当然它不起作用，我猜它必须被重新绑定。

var sel2 = $("<select-two></select-two>") ;
$("#selectList").append(sel2) ; 

有很多关于如何重新绑定整个视图模型的参考，但只是组件?我觉得这个人也有同样的问题:使用javascript加载knockoutjs组件

仅供参考，这是组件代码:

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
});
});

<link rel="stylesheet" href="/assets/js/vendor/select2/dist/css/select2.css" />
<select class="form-control" data-bind="select2"></select>

和如何加载它:

<select-two id="authorSelect" params="placeholder: 'Pick an Author', value: autorSelectData" ></select-two>

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: '<select class="form-control" style="width: 200px;" data-bind="select2: ' + 
            '{placeholder: ''Pick a fruit'', value: value, data: data}">' +
            '</select>'
});
var app = {
  newSelect: function(){
    var cont = $("<p></p>") ; 
    var sel2 = $("<select-two></select-two>") ; 
    ko.applyBindings({}, sel2[0]) ;
    cont.append(sel2) ; 
    $("#select-list").append(cont) ; 
    
  },
  autorSelectData: ko.observable(null), 
  options: ['apple','pear','peach','mango','grape']
};
ko.applyBindings(app);

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
Just the binding: <select class="form-control" style="width: 200px;"
        data-bind="select2: {placeholder: 'Pick a fruit', value: autorSelectData, data: options}">
</select><br>
With component: <select-two params="value: autorSelectData, data: options"></select-two>
<p>Adding Selects</p>
<div id="select-list">
  
</div>
<input type="button" data-bind="click: newSelect()" value="New Select" id="new-select" />