Knockout-Bootstrap

Create rich two way interactions with Bootstrap and Knockout bindings

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

Download

Examples

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray.

<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

Name type default description
placement string | function 'top' how to position the tooltip - top | bottom | left | right
title string | function '' default title value if `title` tag isn't present
trigger string 'hover focus' how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger mutliple, space seperated, trigger types.

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

Name type default description
placement string | function 'right' how to position the popover - top | bottom | left | right
trigger string 'click' how popover is triggered - click | hover | focus | manual
title string | function '' default title value if `title` attribute isn't present
template string '' the id to the template for the content

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

Name type default description
message string '' The message to be displayed in the alert
priority string '' The priority of the alert - error | warning | success | info

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

Name type default description
width computed string '' the name of the computed observable that returns the width percentage

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);
    };
    //....
    //...
};
Fork me on GitHub