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

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', options: {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', options: {title: 'Oh Yea Binding'}}">
    Launch Binding Popover
</button>

<script type="text/html" id="popoverBindingTemplate">
            <button class="close pull-right" type="button" data-dismiss="popover">&times</button>
            <form>
                <label>Popover Binding Header</label>
                <input type="text" data-bind="value: popoverBindingHeader, valueUpdate:'afterkeydown'" />
                <strong>Foreach binding:</strong>
                <table class="table table-striped">
                      <tbody data-bind="foreach: colors">
                        <tr><td><span data-bind="text: $data"></span></td></tr>
                      </tbody>
                </table>
            </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="col-md-4">
        <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 btn-default" type="submit" data-bind="enable: frameworkToAdd().length > 0">Add</button>
            </div>
        </form>
    </div>
    <div class="well col-md-4">
        <ul class="nav nav-list" data-bind="foreach: jsFrameworks">
            <li>
                <span data-bind="text: $data"></span>
                <span class="glyphicon glyphicon-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);
    };
    //....
    //...
};

Examples

<!-- View Code -->
<p data-bind="text: modalBindingBody"></p>
<div class="row">
    <div class="col-md-4">
        <button class="btn btn-lg btn-primary" data-bind="modal: {template: 'modalBindingTemplateLive'}">Change Text Live</button>
    </div>
    <div class="col-md-4">
        <button class="btn btn-lg btn-primary" data-bind="modal: {template: 'modalBindingTemplateSave', openModal: openModal}">Change Text on Save</button>
    </div>
</div>
<br />
<div class="row">
    <div class="col-md-4">
        <button class="btn btn-lg btn-primary" data-bind="modal: {template: 'modalSmallBindingTemplate', data: {modalBindingHeader: modalBindingHeader, body: 'Small Modal'} }">Small Modal</button>
    </div>
    <div class="col-md-4">
        <button class="btn btn-lg btn-primary" data-bind="modal: {template: 'modalLargeBindingTemplate', data: {modalBindingHeader: modalBindingHeader, body: 'Large Modal'} }">Large Modal</button>
    </div>
</div>

<!-- Model Code -->
var ViewModel = function() {
    //....
    //...
    self.modalBindingHeader = ko.observable('Binding in A Modal');
    self.modalBindingBody = ko.observable('Gotta love data binding!!.');
    self.modalBindingTemp = ko.observable();
    self.openModal = function() {
        self.modalBindingTemp(self.modalBindingBody());
    };
    self.saveChange = function() {
        self.modalBindingBody(self.modalBindingTemp());
    };
    //....
    //...
}
                        

Options