Select2 Js 下拉菜单在 durandal Js 中不起作用

Posted 2023-05-07

【中文标题】Select2 Js 下拉菜单在 durandal Js 中不起作用

【英文标题】：Select2 Js dropdown is not working in durandal Js

【发布时间】：2013-12-05 12:28:27

【问题描述】：

我正在使用 durandal Js 2.0 和淘汰赛 Js。我尝试将 Select2 Js 下拉列表集成到 Durandal(http://jsfiddle.net/anasnakawa/6XvqX/381/) 但它不起作用。什么是自定义绑定处理程序以及如何在 durandal 中使用它。

define([select2],function(select2)
    var activate = function() 
    ;
return
activate:activate
;
);

【参考方案1】：

Durandal Js 使用 requireJs 来加载所有需要的脚本。在 main.js 中配置您的路径并将脚本添加到您的 viewModel 中。您还需要在 viewModel 中添加敲除绑定处理程序。

viewModel.js

define(['plugins/router', 'durandal/app', 'knockout', 'myPath/select2' ], function (router, app, ko, select2) 

    ko.bindingHandlers.select2 = 
        init: function (element, valueAccessor) 
            $(element).select2(valueAccessor());

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

    var DropdownData = ko.observable([]);

    var activate = function () 
        //your code: bind data to observable from ajax call or local repository.
        DropdownData(ko.toJS(data));
    ;

    return 
       activate:activate
    ;
);

viewModel.html

<select data-bind="options: DropdownData, optionsValue: 'Data_Id', optionsText:'Data_Name',optionsCaption: 'Select...', value:myModel.dropdown, select2: " ></select>

对于绑定处理程序，请参阅Knockout Custom Bindings