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

Question

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

我试过追加一个新元素，当然不行，我猜它必须重新绑定。

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

有很多关于如何重新绑定整个视图模型的参考，但只是组件？我认为这个人有同样的问题： Load knockoutjs component using javascript

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

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" />

Answer 1

I'm guessing it has to be rebinded.

请记住，当您将重新绑定视为一种解决方案时，在 99% 的情况下您应该重新考虑您的方法。

creating the component programmatically.

如果您遵循 MVVM/MVC 准则，则永远不必这样做。所有数据模型/视图的结构都是预定义的；只有他们的内容可以改变。

你不应该做什么？

在组件内部注册自定义绑定，这意味着每次创建组件实例时都会重新注册。
在组件模板中链接样式sheet，这意味着每次创建组件实例时都会加载样式sheet（而不是一次）。
使用 change 事件而 select2 docs 显示您必须使用 select2:select.

下面是您的代码的精简版本（例如，数据数组而不是 AJAX），展示了它如何与 (1) 仅绑定以及 (2) 封装组件一起工作.还是不行，如果不行，是什么不行？

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 = {
  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>

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

How to load a KnockoutJS component programmatically

javascript

knockout.js

knockout-3.0