Select2 Js dropdown is not working in durandal Js

Question

I am using durandal Js 2.0 & knockout Js.I tried to integrate Select2 Js dropdown in Durandal(http://jsfiddle.net/anasnakawa/6XvqX/381/) But its not working. What is custom Binding handlers & how to use it in durandal.

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

score 0 · Accepted Answer · answered Nov 25 '13 at 12:34

Durandal Js uses requireJs to load all the scripts needed. configure your path in main.js and add the script in your viewModel. You also need to add knockout binding handlers in your 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>

for binding handlers, refer this Knockout Custom Bindings

Select2 Js dropdown is not working in durandal Js

1 Answers1