0
点赞
收藏
分享

微信扫一扫

select2 集成knockoutjs

mjjackey 2023-04-20 阅读 63


1. execute scripts when page loading:



ko.bindingHandlers.select2 = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var options = ko.toJS(valueAccessor()) || {};
        var allBindings = allBindingsAccessor();
        var lookupKey = allBindings.lookupKey;
        setTimeout(function() {
            $(element).select2(options);
        }, 0);

        if (lookupKey) {
            var value = ko.utils.unwrapObservable(allBindings.value);
            $(element).select2('data', ko.utils.arrayFirst(options.data.results, function(item) {
                return item[lookupKey] === value;
            }));
        }

        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).select2('destroy');
        });
    },
    update: function(element) {
        $(element).trigger('change');
    }
};



 

 

2. page html tag, Ex:

<select id="form_input1_orientation"></select>

 

3. data binding :


$("#form_input1_orientation").attr("data-bind",
                "options: orientationCategories, optionsValue: 'Id', optionsText: 'Name',  selectedOptions: install().orientation_1, select2: {}");


 

 

4. view modal:



var orientationCategoriesData = [
            {Id: "north", Name: "正北"},
            {Id: "northeast", Name: "东北"},
            {Id: "northwest", Name: "西北"},
            {Id: "east", Name: "正东"},
            {Id: "southeast", Name: "东南"},
            {Id: "south", Name: "正南"},
            {Id: "southwest", Name: "西南"},
            {Id: "west", Name: "正西"}
        ]

self.orientationCategories = ko.observableArray(orientationCategoriesData);

self.orientation_1 = ko.observable(["east"]);



 

enjoy.

举报

相关推荐

0 条评论