knockout.js - Select2 Js 下拉菜单在 durandal Js 中不起作用

Question

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

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

Answer 1

Durandal Js 使用 requireJs 来加载所有需要的脚本。在 main.js 中配置您的路径并将脚本添加到您的 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
    };
});

视图模型.html

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

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