Knockout-bootstrap is a set of custom knockout binding handlers that provide access to Bootstrap javascript widgets.

Donate if you would like to support the project.

Features

• Enable Bootstrap widgets with data-bind attribute
• Two way bindings of observables inside bootstrap elements
• Use knockout templates to create widget content
• Keeps your coding style consistent
• ~2kb

Examples

<a href="#" data-bind="tooltip: {title: 'Default tooltip'}">you probably</a>
<a href="#" data-bind="tooltip: {title: 'Another tooltip', placement: 'right'}">have a</a>

Options

Examples

Simple Popover

Takes text content from a template and puts it in a popover

<button class="btn" data-bind="popover: {template: 'popoverTemplate', title: 'Oh Yea'}">
    Launch Simple Popover
</button>

<script type="text/html" id="popoverTemplate">
    <button class="close pull-right" type="button" data-dismiss="popover">×</button>
    Hey I am some content in A popover
</script>

Two Way Binding Popover

Manipulate data from within a popover

<h1 data-bind="text: popoverBindingHeader"></h1>
<button class="btn" data-bind="popover: {template: 'popoverBindingTemplate', title: 'Oh Yea Binding'}">
    Launch Binding Popover
</button>

<script type="text/html" id="popoverBindingTemplate">
    <button class="close pull-right" type="button" data-dismiss="popover">×</button>
    <form>
        <label>Popover Binding Header</label>
        <input type="text" data-bind="value: popoverBindingHeader, valueUpdate:'afterkeydown'" />
    </form>
</script>

Options

Examples

<!-- View Code -->
<div data-bind="foreach: alerts">
    <div data-bind="alert: $data"></div>
</div>

<!-- View Model -->
var ViewModel = function() {
    //....
    //...
    self.alerts = ko.observableArray([
                        {'message': 'Here is an Error', 'priority': 'error'},
                        {'message': 'Here is a Warning', 'priority': 'warning'},
                        {'message': 'Here is a Success', 'priority': 'success'},
                        {'message': 'Here is some Info', 'priority': 'info'}
                    ]);
    //....
    //...
};

Options

Examples

<!-- View Code -->
<form>
    <label>Update Progress Value Observable</label>
    <input type="text" data-bind="value: progressVal, valueUpdate:'afterkeydown'" />
</form>
<div data-bind="progress: 'progressWidth'"></div>

<!-- View Model -->
var ViewModel = function() {
    //....
    //...
    self.progressVal = ko.observable(10);
    self.progressWidth = ko.computed(function(){
        return self.progressVal() + '%';
    }, self);
    //....
    //...
};

Options

Examples

Typeahead input with a data source as an observable array. Pass a reference to the data-bind="typeahead:" binding and the items from that observable array will be shown as suggestions in the input box. To show the binding nature of this feature the example allows you to add and remove items from the array.

<!-- View Code -->
<div class="row">
    <div class="span4">
        <form>
            <label>Javascript Frameworks</label>
            <input type="text" data-bind="typeahead: jsFrameworks" />
        </form>
        <form data-bind="submit: addFramework">
            <label>Add a framework</label>
            <input type="text" data-bind="value: frameworkToAdd, valueUpdate:'afterkeydown'" />
            <div class="form-actions">
                <button class="btn" type="submit" data-bind="enable: frameworkToAdd().length > 0">Add</button>
            </div>
        </form>
    </div>
    <div class="well span4">
        <ul class="nav nav-list" data-bind="foreach: jsFrameworks">
            <li>
                <span data-bind="text: $data"></span>
                <span class="icon-remove" data-bind="click: $root.removeFramework"></span>
            </li>
        </ul>
    </div>
</div>

<!-- View Model -->
var ViewModel = function() {
    //....
    //...
    self.jsFrameworks = ko.observableArray([
            'Angular',
            'Canjs',
            'Batman',
            //...
        ]);

    self.frameworkToAdd = ko.observable("");
    self.addFramework = function() {
        self.jsFrameworks.push(self.frameworkToAdd());
    };

    self.removeFramework = function(framework) {
        self.jsFrameworks.remove(framework);
    };
    //....
    //...
};