Select2 Js下拉列表在durandal Js中不起作用

时间:2013-11-21 06:40:00

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

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

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

1 个答案:

答案 0 :(得分:0)

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

<强> 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