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

【问题标题】：Select2 Js dropdown is not working in durandal JsSelect2 Js 下拉菜单在 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
};
});

【问题讨论】：

标签： knockout.js jquery-select2 durandal-2.0

【解决方案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

【讨论】：