CODEWITHSUNDEEP
javascriptcsstwitter-bootstraptoggledurandal
Daniel
Daniel

Reputation: 531

Durandal and bootstrap-toggle

i have a problem with bootstrap-toggle (http://www.bootstraptoggle.com/) together with durandal. I wanted to replace the normal checkboxes with larger and nicer toggle-switches, so the mobile users can access them better.

So in durandal i included the css in index.html (no sample because identical to docs) and the js in main.js:

requirejs.config({
paths: {
    'text': '../lib/require/text',
    'durandal':'../lib/durandal/js',
    'plugins' : '../lib/durandal/js/plugins',
    'transitions' : '../lib/durandal/js/transitions',
    'knockout': '../lib/knockout/knockout-3.1.0',
    'bootstrap': '../lib/bootstrap/js/bootstrap',
    'bootstrap-toggle': '../lib/bootstrap/js/bootstrap-toggle.min',
    'jquery': '../lib/jquery/jquery-1.9.1',
    'toastr': '../lib/toastr/toastr.min',
    'session': '../app/services/session',
    'authentication': '../app/services/authentication',
    'utility': '../app/services/utility',
    'logger': '../app/services/logger'
},
shim: {
    'bootstrap': {
        deps: ['jquery'],
        exports: 'jQuery'
   }
}

});

In the shell.js I load the modules (as bootstrap isn't loaded by default):

define(['plugins/router', 'knockout' ,'session', 'toastr','logger', 'durandal/app','bootstrap','bootstrap-switch']
, function (router, ko, session, toastr, logger, app, btstrps, btstrpsw) {
var showSplash = ko.observable(false);
//...
//routing etc...

After reading the docs i suppose that it is enough to make the checkboxes 'data-toggle':

<input checked data-toggle="toggle" type="checkbox" data-bind="checked: allCustomers" />

I have been around this problem the last few hours... maybe someone has experienced similar problems. I don't know if the require-routine has loaded the toogle.js properly - how can i test this?

Upvotes: 2

Views: 676

Answers (2)

Daniel
Daniel

Reputation: 531

As Anish already mentioned (thanks again) you need a custom binding handler. Just for better integration in durandal i want to show my solution:

mybinding.js

define(['knockout', 'jquery'], function (ko, $) {
ko.bindingHandlers.bootstrapToggle = {
    init: function(element, valueAccessor){
        var observable = valueAccessor();
        $(element).change(function(){ observable($(this).prop('checked')); });
        var subscription = observable.subscribe(function(value){
            $(element).bootstrapToggle(!!value ? "on" : "off");
        });
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            subscription.dispose()
            $(element).bootstrapToggle("destroy");
        });
        $(element).bootstrapToggle(!!valueAccessor()() ? "on" : "off");

    }
}
});

main.js

define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'toastr'], function (system, app, viewLocator, toastr) {
require(['bootstrap','bootstrap-toggle','mybinding']);

//>>excludeStart("build", true);
system.debug(true);
//>>excludeEnd("build");

app.configurePlugins({
    router:true,
    bootstrapModal: true
});

app.start()
    .then(function() {
        toastr.options.positionClass = 'toast-bottom-right';
        toastr.options.backgroundpositionClass = 'toast-bottom-right';
        viewLocator.useConvention();
        app.setRoot('viewmodels/shell','entrance');
});
});

exampleView.html

<!-- some form markup-->
<input data-on="1" data-off="0" data-toggle="toggle" data-size="mini" type="checkbox"
                       data-bind="attr: { id: name }, bootstrapToggle: selected"/>

Upvotes: 0

Anish Patel
Anish Patel

Reputation: 4392

You will need to wrap bootstrapToggle with a knockoutjs binding handler to enable two-way binding between your observable and the bootstrapToggle widget.

Please check the snippet below for a working example.

ko.bindingHandlers.bootstrapToggle = {
    init: function(element, valueAccessor){
        var observable = valueAccessor();
        $(element).change(function(){ observable($(this).prop('checked')); });
        var subscription = observable.subscribe(function(value){
            $(element).bootstrapToggle(!!value ? "on" : "off"); 
        });
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            subscription.dispose()
            $(element).bootstrapToggle("destroy");
        });        
        $(element).bootstrapToggle(!!valueAccessor()() ? "on" : "off");
    }
}

var vm = {
    allCustomers: ko.observable(true)
}

ko.applyBindings(vm);

setTimeout(function(){ vm.allCustomers(false); }, 2000);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>

<input data-toggle="toggle" type="checkbox" data-bind="bootstrapToggle: allCustomers" />

<div data-bind="text: allCustomers">/</div>

Alternatively, here is a fiddle with the same working example.

I'm open to suggestions on a better binding handler for bootstrapToggle that can achieve two-way way binding.

Upvotes: 1

Related Questions