javascript - 模板内的 Knockout 自定义绑定(bind)处理程序

Question

我创建了一个自定义绑定(bind)处理程序来呈现 html 选择组件。

如:

 <select data-bind="dynamicSelect: { src:  'Category', label: 'Category'} "></select>

在用户选择一个类别后，类别字段数组被填充，我已将其绑定(bind)到将呈现特定模板的 div

  <div data-bind="template: { name: displayMode, foreach: categoryFields }"></div>

我的模板

<script type="text/html" id="inputTemplate">
    <label data-bind="text: FieldName, attr: { for: FieldName }"></label>
    <input data-bind="attr: { name: FieldName, type: $parent.fieldType($data) }" />
</script>
<script type="text/html" id="lookupTemplate">
    <label data-bind="text: FieldName, attr: { for: FieldName }"></label>
    <select data-bind="dynamicSelect: { src: FieldName, label: FieldName}"></select>
</script>

问题是，模板里面的dynamicSelect好像没有绑定(bind)？我将如何在模板中重用绑定(bind)处理程序？

绑定(bind)处理器

define(['durandal/composition', 'plugins/http'], function (composition, http) {
    composition.addBindingHandler('dynamicSelect', {
        init: function (element, valueAccessor) {
            console.log(element);
            console.log(valueAccessor());
            var elem = $(element);
            elem.addClass('hidden');
            elem.before('<label>' + valueAccessor().label + '</label>');
            elem.after('<div><br/><label><i class="icon-spinner icon-spin active"></i> Loading...</label></div>');

            console.log('/api/lookup?type=' + valueAccessor().src);
            return http.get('/api/lookup?type=' + valueAccessor().src).then(function (res) {
                var items = res.LookupItems;
                $.each(items, function (idx) {
                    elem.append('<option value=' + items[idx].Id + '>' + items[idx].Name + '</option>');
                });
                elem.removeClass('hidden');
                elem.next().addClass('hidden');
            });

        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        }
    });
});

Answer 1

找到我的问题。

我使用组合助手 Durandals 注册了绑定(bind)处理程序。因此(这是我最好的猜测)，它只在页面创建期间被调用。解释为什么我的第一个选择被填充。

我将绑定(bind)处理程序更改为

define(['plugins/http'], function (http) {
    ko.bindingHandlers.dynamicSelect = {
        init: function (element, valueAccessor) {
            var elem = $(element);
            elem.addClass('hidden');
            elem.before('<label>' + valueAccessor().label + '</label>');
            elem.after('<div><br/><label><i class="icon-spinner icon-spin active"></i> Loading...</label></div>');

            console.log('/api/lookup?type=' + valueAccessor().src);
            return http.get('/api/lookup?type=' + valueAccessor().src).then(function (res) {
                var items = res.LookupItems;
                $.each(items, function (idx) {
                    elem.append('<option value=' + items[idx].Id + '>' + items[idx].Name + '</option>');
                });
                elem.removeClass('hidden');
                elem.next().addClass('hidden');
            });    
        }
    };
});