删除模板内的自定义绑定处理程序

Knockout Custom Binding handler inside template

本文关键字：绑定 处理 程序 自定义 删除      更新时间：2023-09-26

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

例如：

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

在用户选择一个类别后，将填充类别字段数组，我将其绑定到一个div，该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似乎没有绑定？如何在模板中重用绑定处理程序？

绑定处理程序

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

发现我的问题。

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

我将绑定处理程序更改为

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

这并不能回答您的持久相关问题，但它解决了您在代码中缺乏MVVM心态的问题。：D

我会做它有一个ViewModel

MyApp.LookupViewModel = function(label, src) {
    this.label = label;
    this.src = src;
    this.items = ko.observableArray();   
    this.selectedItem = ko.observable();    
    this.loading = ko.observable(true);
    this.loaded = ko.computed(function() {
        return !this.loading();
    }, this);

    //simulate ajax
    setTimeout(function() {
        this.items([{
                name: "Foo1",
                id: 1
            },{
                name: "Foo2", 
                id: 2
            }
        ]);
        this.loading(false);
    }.bind(this), 1000);
};

当您想要使用它时，只需声明VM 的一个实例

MyApp.ViewModel = function() {
    this.lookup = new MyApp.LookupViewModel("Foo", "http://foo");
}

http://jsfiddle.net/Vjzn6/1/

我上面的fiddle使用了我的一个小lib，它负责查找视图名称，这样您就不需要在视图中显式声明模板绑定。

相关文章：