Knockstrap

Knockout bindings library

Knockstrap is binding library for Knockout.js, which provides binding to Twitter Bootstrap widgets

Features

  • Using Bootstrap widgets via data-bind attribute
  • Supports dynamicaly changing parameters and data of widgets via observables
  • Supports Knockout templates for such widgets, as modal or popover
  • Supports using of third party template engines
  • Provides default templates for such widgets, as modal, for typical using
  • Provides string template engine, which allows to use javascript strings as templates

Usage

If you have all dependencies, you only need to include knockstrap.min.js or knockstrap.js to your pages:

<script src="../path/to/knockstrap.min.js"></script>
Or with cdn:
<script src="https://cdn.jsdelivr.net/npm/knockstrap@1.4.1/build/knockstrap.js"></script>

Also you can install it via npm, bower or nuget.

Dependencies

Binding to Bootstrap tooltip

Examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec pharetra eros. Sed luctus vitae ligula viverra porttitor. Vestibulum porttitor egestas lacus.
Left Right Top Bottom

Html markup

<div>
    Lorem ipsum dolor sit amet, <a data-bind="tooltip: { title: 'Tooltip example' }">consectetur</a> adipiscing elit. 
    Vestibulum nec pharetra eros. Sed luctus vitae ligula 
    <a data-bind="tooltip: { title: tooltipTitle, placement: tooltipPlacement }">viverra</a> porttitor. 
    Vestibulum porttitor egestas lacus.
</div>
    
<!-- ... -->

<input type="text" data-bind="value: title, valueUpdate: 'afterkeydown'" />
<div>
    <input type="radio" name="tooltipPlacement" value="left" data-bind="checked: placement" />
    Left
    <input type="radio" name="tooltipPlacement" value="right" data-bind="checked: placement" />
    Right
    <input type="radio" name="tooltipPlacement" value="top" data-bind="checked: placement" />
    Top
    <input type="radio" name="tooltipPlacement" value="bottom" data-bind="checked: placement" />
    Bottom
</div>

View model

function TooltipExampleViewModel() {
    this.tooltipTitle = ko.observable('Observable title');
    this.tooltipPlacement = ko.observable('left');
}

Options

data-bind="tooltip: tooltipOptions"
  • tooltipOptions

    Type: object, can be observable

    Uses Bootstrap 3 options. If any option is not specified, uses default value. See Bootstrap documentation. All of the options can be observables. Also option's object can be observable too.

Binding to Bootstrap popover. Supports custom templates with observables for popover content

Examples

Html markup

<button class="btn btn-primary" data-bind="popover: { 
        options: { title: 'Popover with template', placement: 'top' }, 
        template: popoverTemplate, 
        data: { text: 'First template' } 
    }">Click</button>

<button class="btn" data-bind="click: switchTemplates">Switch templates</button>

<button class="btn btn-primary" data-bind="popover: { 
        options: { title: 'Focus', content: 'Focus popover', trigger: 'focus', placement: 'bottom' } 
    }">Focus</button>

<button class="btn btn-primary" data-bind="popover: { 
        options: { title: 'Hover', content: 'Hover popover', trigger: 'hover' } 
    }">Hover</button>
        
<script type="text/html" id="firstPopoverTemplate">
    <button class="close pull-right" type="button" data-dismiss="popover">×</button>
    <p data-bind="text: text"></p>
</script>

<script type="text/html" id="secondPopoverTemplate">
    <p>Second template</p>
</script>

View model

function PopoverExampleViewModel() {
    var self = this;
    
    self.popoverTemplate = ko.observable('firstPopoverTemplate');
    self.switchTemplates = function() {
        self.popoverTemplate() === 'firstPopoverTemplate' 
                                    ? self.popoverTemplate('secondPopoverTemplate') 
                                    : self.popoverTemplate('firstPopoverTemplate');
    };
}

Options

All of the options can be observables (besides trigger, see details), also option's object can be observable too

data-bind="popover: { options: options, template: templateName, data: templateData, templateOptions: templateOptions }"
  • options

    Type: object, can be observable

    Bootstrap options for popover. If any option is not specified, uses default value. Please, see Bootstrap documentation

  • templateName

    Type: string, can be observable

    Name of template for popover content. If template is not specified, uses content property from options object

  • templateData

    Type: object, can be observable

    Data for template

  • templateOptions

    Type: object

    Contains options for template.

    They are: templateEngine, afterRender, beforeRender and afterAdd. Please, see Knockout documentation for details.

Short notation

If you don't need use template, you can use short notation of binding, which uses only option object.

data-bind="popover: popoverOptions"
  • popoverOptions

    Type: object, can be observable

    Bootstrap options for popover. If any option is not specified, uses default value. Please, see Bootstrap documentation

Binding to Bootstrap alert widget. This binding can be used with virtual elements. Supports custom templates with observables

Examples

Html markup

<div data-bind="alert: { message: message, type: type }"></div>

<div data-bind="alert: { message: 'Using custom alert template', template: 'alertExampleTemplate', type: 'danger' }"></div>

<!-- ko alert: { message: 'Using virtual root element', type: 'success' } -->
<!-- /ko -->

<script type="text/html" id="alertExampleTemplate">
    <p data-bind="text: message"></p>
    <button class="btn btn-primary" data-dismiss="alert">Close</button>
</script>

View model

function AlertExampleViewModel() {
    this.type = ko.observable('info');
    
    this.message = ko.observable('Alert message');
}

Options

All of the options can be observables.

data-bind="alert: { message: message, type: type, template: template, data: data, templateOptions: templateOptions }"
  • message

    Type: string, can be observable

    Text of alert message. Doesn't used if data property is specified.

  • type

    Type: string, can be observable (default: 'info')

    Type of alert message. Possible values are 'info', 'warning', 'danger', 'success'. To specify your own type you should define css-styles for this type. For exmaple, for type 'my-custom-type', you shoud provide css class 'alert-my-custom-type'.

  • template

    Type: string, can be observable (default: 'alertTemplate')

    Name of template for alert content. Default template:

    <button class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <p data-bind="text: message"></p>
    
  • data

    Type: object, can be observable

    Data for template. If this option is specified, message option will be ignored.

    For default template, you should provide message property (or, if it will not provided via data, message option of binding will be used).

  • templateOptions

    Type: object

    Contains options for template.

    They are: templateEngine, afterRender, beforeRender and afterAdd. Please, see Knockout documentation for details.

Binding to Bootstrap modal widget.

Examples

Html markup

<button class="btn btn-primary" data-bind="click: show">Show modal</button>

<div class="btn-group form-group" data-toggle="buttons" data-bind="radio: modalSize">
    <label class="btn btn-default">
        <input type="radio" name="modalSizing" value="" />
        None
    </label>
    <label class="btn btn-default">
        <input type="radio" name="modalSizing" value="modal-lg" />
        Large
    </label>
    <label class="btn btn-default">
        <input type="radio" name="modalSizing" value="modal-sm" />
        Small
    </label>
</div>

<div data-bind="modal: {
    visible: modalVisible,
    dialogCss: modalSize,
    header: { data: { label: headerLabel } },
    body: { name: bodyTemplate, data: bodyData },
    footer: { data: { action: switchTemplates, closeLabel: 'Custom text', primaryLabel: 'Change body template' } }
}"></div>

<script type="text/html" id="firstModalTemplate">
    <p data-bind="text: text"></p>
    <div class="form-group">
        <label data-bind="text: label"></label>
        <input type="text" data-bind="value: label, valueUpdate: 'afterkeydown'" class="form-control" />
    </div>
</script>

<script type="text/html" id="secondModalTemplate">
    <p data-bind="text: text"></p>
    <p data-bind="text: simpleLabel"></p>
</script>

View model

function ModalExampleViewModel() {

    var self = this;

    var firstTemplateData = {
        text: 'First template',
        label: ko.observable('Observable label')
    };

    var secondTemplateData = {
        text: 'Second template',
        simpleLabel: 'Simple text label'
    };

    self.modalVisible = ko.observable(false);

    self.show = function() {
        self.modalVisible(true);
    };

    self.headerLabel = ko.observable('Some header text');
    self.bodyTemplate = ko.observable('firstModalTemplate');
    self.bodyData = ko.computed(function() {
        return self.bodyTemplate() === 'firstModalTemplate' ? firstTemplateData : secondTemplateData;
    });

    self.okText = ko.observable();

    self.switchTemplates = function() {
        self.bodyTemplate() === 'firstModalTemplate' 
                            ? self.bodyTemplate('secondModalTemplate') 
                            : self.bodyTemplate('firstModalTemplate');
    };
        
    self.modalSize = ko.observable('modal-lg');
}

Options

All of the options can be observables.

data-bind="modal: { options: options, visible: visible, dialogCss: dialogCss, header: header, body: body, footer: footer, events: events }"
  • options

    Type: object, can be observable

    Bootstrap options for modal. If any option is not specified, it uses default values (except show, it default value is false in comparing with Bootstrap). Also, can be specified via data-attributes. Please, see Bootstrap documentation for details.

  • visible

    Type: boolean, can be observable (default: false)

    Shows modal, if true, otherwise hides modal. By default is false.

    Can be omitted in order to use Bootstrap's attributes for showing or closing modal.

  • dialogCss

    Type: string, can be observable (default: undefined)

    Used to add classes to modal-dialog element. For example, it can accept modal-lg value for large modal or modal-sm for small.

    Please, see Bootstrap documentation for more details.

  • header

    Type: object, can be observable

    Template binding for modal header, uses options from Knockout template binding. Please, see Knockout documentation for details.

    Default values of header object:

    • name

      Type: string, can be observable (default: 'modalHeader')

      Name of template for modal header. Default template:

      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 data-bind="text: label"></h3>
      
    • data

      Type: object

      Data for header template. For default template, you should provide label property

  • body

    Type: object, can be observable

    Template binding for modal body, uses options from Knockout template binding. Please, see Knockout documentation for details.

    Default values of body object:

    • name

      Type: string, can be observable (default: 'modalBody')

      Name of template for modal body. Default template:

      <div data-bind="html: content"></div>
    • data

      Type: object

      Data for body template. For default template, you should provide content property, which can contain html.

  • footer

    Type: object, can be observable

    Template binding for modal footer, uses options from Knockout template binding. Please, see Knockout documentation for details.

    If omitted, no footer will be rendered.

    Default values of footer object:

    • name

      Type: string, can be observable (default: 'modalFooter')

      Name of template for modal footer. Default template:

      <!-- ko if: $data.action -->
      <a href="#" class="btn btn-primary" data-bind="click: action, html: primaryLabel"></a>
      <!-- /ko -->
      <a href="#" class="btn btn-default" data-bind="html: closeLabel" data-dismiss="modal"></a>
      
    • data

      Type: object

      Data for footer template. For default template, data object contains:

      • action

        Type: function

        Function, which will be called, when user clicks on primary button. If this property is omitted for default template, primary button wouldn't render.

      • primaryLabel

        Type: string, can be observable (default: 'Ok')

        Text for primary button in default template.

      • closeLabel

        Type: string, can be observable (default: 'Close')

        Text for closing button in default template.

  • events

    Type: object, can be observable

    Names of Bootstrap events, which are used by binding. Some bootstrap plugins change them, so you can pass new events to binding.

    Default values of events object:

    • shown

      Type: string, can be observable (default: 'shown.bs.modal')

      Name of Bootstrap event, which fired when the modal has been made visible to the user

    • hidden

      Type: string, can be observable (default: 'hidden.bs.modal')

      Name of Bootstrap event, which fired when the modal has finished being hidden from the user

Default values

Default values for modal binding located in ko.bindingHandlers.modal.defaults object. It contains default css and attributes for root element of modal and default values for header, body and footer. Can be changed before ko.applyBindigs() is called.

defaults: {
    css: 'modal fade',
    attributes: {
        role: 'dialog'  
    },

    events: {
        shown: 'shown.bs.modal',
        hidden: 'hidden.bs.modal'
    },

    headerTemplate: {
        name: 'modalHeader',
        templateEngine: ko.stringTemplateEngine.instance
    },

    bodyTemplate: {
        name: 'modalBody',
        templateEngine: ko.stringTemplateEngine.instance
    },

    footerTemplate: {
        name: 'modalFooter',
        templateEngine: ko.stringTemplateEngine.instance,
        data: {
            closeLabel: 'Close',
            primaryLabel: 'Ok'
        }
    }
}

Binding to Bootatrap progress bar

Examples

Striped
Animated
Text hidden
Success Info Warning Danger

Html markup

<div data-bind="progress: { value: value, type: type, text: text, textHidden: textHidden, animated: animated, striped: striped }"></div>

View model

function ProgressExampleViewModel() {
    this.value = ko.observable(50);

    this.animated = ko.observable();

    this.striped = ko.observable();

    this.type = ko.observable('info');

    this.text = ko.observable('Complete');

    this.textHidden = ko.observable(true);
}

Options

All of the options can be observables.

data-bind="progress: { value: value, type: type, text: text, textHidden: hidden, animated: animated, striped: striped }"
  • value

    Type: number, can be observable

    Progress value in percents. Values greater than 100, assumed equal to 100

  • type

    Type: string, can be observable (default: none)

    Type of progress bar. Possible values are 'info', 'warning', 'danger', 'success'. To specify your own type you should define css-styles for it. For exmaple, for type 'my-custom-type', you shoud provide css class 'progress-bar-custom-type'.

  • text

    Type: string, can be observable (default: empty string)

    Text on progress bar after percents

  • textHidden

    Type: boolean, can be observable (default: true)

    Hides percents of progress and text on progress bar, if true, otherwise hides.

  • striped

    Type: boolean, can be observable (default: false)

    Adds stripes to progress bar, if true. Work only in Bootstrap >= 3.2.0

  • animated

    Type: boolean, can be observable (default: false)

    Animates stripes on progress bar, if true. Work only in Bootstrap >= 3.2.0

Short notation

Examples

If you only need use progress value, you can use short notation of binding, which uses only number as model.

Html markup

<div data-bind="progress: progress"></div>

View model

function ProgressExampleViewModel() {
    //...

    this.progress = ko.observable(20);
}

Options

data-bind="progress: progressValue"
  • progressValue

    Type: number, can be observable

    Progress value in percents. Values greater than 100, assumed equal to 100

Stacked progress bars

Examples

If you need use multiple bars into the same .progress to stack them, you can pass array of options objects to binding:

Striped
Animated
Text hidden
Success Info Warning Danger

Html markup

<div data-bind="progress: progressBars"></div>

View model

function ProgressExampleViewModel() {
    this.firstBar = {
        value: ko.observable(50),
        animated: ko.observable(),
        striped: ko.observable(),
        type: ko.observable('warning'),
        text: ko.observable('Complete'),
        textHidden: ko.observable(true)
    };

    this.secondBar = ko.observable(20);

    this.progressBars = ko.observableArray([
        this.firstBar,
        this.secondBar
    ]);
}

Options

data-bind="progress: progressBarsArray"
  • progressBarsArray

    Type: array, can be observable

    Array of data-objects for progress bar. Each element in array should contain options for progress bar in full or short notation

Default values

Default values for progress binding located in ko.bindingHandlers.progress.defaults object. It contains default css for root element of progress-bar and default values for its options. Can be changed before ko.applyBindigs() is called.

defaults: {
    css: 'progress',
    text: '',
    textHidden: true,
    striped: false,
    type: '',
    animated: false
}

Toggle buttons

Binding to Bootstrap toggle button.

Examples

Html markup

<button class="btn btn-info" data-bind="toggle: isToggled">Toggle button</button>

Viem model

function ButtonsExampleViewModel() {
    //...

    this.isToggled = ko.observable(false);
}

Options

data-bind="toggle: value"
  • value

    Type: boolean, should be observable

    Observable value is set in true, when button is toggled, otherwise, value is set in false. This binding is two-way, if observable value changes, 'active' class will be set to element.

Radio buttons

Two-way binding to Bootstrap radio buttons. Default Knockout checked binding doesn't work with Bootstrap's buttons, so you can use this binding

Examples

Html markup

<div class="btn-group form-group" data-toggle="buttons" data-bind="radio: radioValue">
    <label class="btn btn-primary">
        <input type="radio" name="options" value="A" />
        A
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" value="B" />
        B
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" value="C" />
        C
    </label>
</div>

View model

function ButtonsExampleViewModel() {
    //...

    this.radioValue = ko.observable();
}

Options

data-bind="radio: value"
  • value

    Type: string, should be observable

    Observable value is set to value of chosen radiobutton. Initially, when no radio button is toggled, observable value is undefined. This binding is two-way. For correct work all radio buttons should have value attribute.

Checkbox buttons

Two-way binding to Bootstrap checkbox buttons. Default Knockout checked binding doesn't work with Bootstrap's buttons, so you can use this binding

Examples

A value:
B value:

Html markup

<div class="btn-group form-group" data-toggle="buttons" data-bind="checkbox: checkboxArray">
    <label class="btn btn-primary">
        <input type="checkbox" value="A" />
        A
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" value="B" />
        B
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" value="C" />
        C
    </label>
</div>

<div class="btn-group form-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox" data-bind="checkbox: checkboxValueA" />
        A
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" data-bind="checkbox: checkboxValueB" />
        B
    </label>
</div>

View model

function ButtonsExampleViewModel() {
    //...

    this.checkboxArray = ko.observableArray();
        
    this.checkboxValueA = ko.observable(true);
        
    this.checkboxValueB = ko.observable(false);
}

Options

data-bind="checkbox: value"
  • value

    Type: array or boolean, should be observable

    Array, contains selected values or boolean, which is set to true or false, depending of checkbox state. This binding is two-way, if array values changed, corresponding checkbox is set up, if value is deleted from array, otherwise, it is set down. For boolean case, if observable value changes, corrseponding checkbox is set up, if value is true, otherwise, it is set down.

Binding to Bootstrap Carousrel widget

Examples

With default templates and options:

Html markup

<div data-bind="carousel: { content: { data: itemsFirst } }"></div>

View model

function CarouselExampleViewModel() {
    // ...

    self.itemsFirst = ko.observableArray([
        {
            src: 'holder.js/900x200/text:First image',
            alt: 'First image',
            content: 'First caption'
        }, {
            src: 'holder.js/900x200/text:Second image',
            alt: 'Second image',
            content: 'Second caption'
        }, {
            src: 'holder.js/900x200/text:Third image',
            alt: 'Third image',
            content: 'Third caption'
        }
    ]);
}

Carousel with custom item template:

Html markup

<div data-bind="carousel: { content: { name: 'carouselItemTemplate', data: itemsSecond } }"></div>
            
<script type="text/html" id="Script1">
    <h4 data-bind="text: primary"></h4>
    <p data-bind="text: secondary"></p>
</script>

View model

function CarouselExampleViewModel() {
    // ...

    self.itemsSecond = ko.observableArray([
        {
            src: 'holder.js/900x270/text:First image',
            alt: 'First image',
            primary: 'First caption',
            secondary: 'First subcaption'
        }, {
            src: 'holder.js/900x270/text:Second image',
            alt: 'Second image',
            primary: 'Second caption',
            secondary: 'Second subcaption'
        }, {
            src: 'holder.js/900x270/text:Third image',
            alt: 'Third image',
            primary: 'Third caption',
            secondary: 'Third subcaption'
        }
    ]);
}       

Options

data-bind="carousel: { id: id, options: options, content: content, indicators: indicators, controls: controls }"
  • id

    Type: string, can be observable

    Id of carousel. It will be ignored, if carousel has id attribute. If there is no id attribute and id option is not specified, id will be generated.

  • options

    Type: object, can be observable

    Bootstrap options for carousel. Please, see Bootstrap documentation.

  • content

    Type: object, can be observable

    Template binding for single carousel item, uses options from Knockout template binding. Please, see Knockout documentation for details.

    Default values of item template:

    • name

      Type: string, can be observable (default: 'carouselContent')

      Name of single item temlate for carousel. Default template:

      <div data-bind="text: content"></div>
    • data

      Type: array, can be observable

      Items for carousel. Each item will be passed to content template. Each item should contains src, altproperties. For default template item should contain content property.

    • converter

      Type: function

      Function, which applies for each item and returning data object for template. Default function just return item itself.

  • indicators

    Type: object, can be observable

    Template binding for carousel indicators, uses options from Knockout template binding. Please, see Knockout documentation for details.

    Default values of indicators object:

    • name

      Type: string, can be observable (default: 'carouselIndicators')

      Name of controls temlate for carousel. Default template:

      <ol class="carousel-indicators" data-bind="foreach: items">
          <li data-bind="attr: { 'data-target': $parent.id, 'data-slide-to': $index }"></li>
      </ol>
      
    • data

      Type: object, can be observable

      Data for indicators template. For default template, it should contains id and items properties.

    • dataConverter

      Type: function

      Function, which creates data object for indicators template. Accepts binding value as parameter. Will be ignored, if data property is specified. Default function:

      function(value) {
          return {
              id: ko.computed(function() {
                  return '#' + ko.unwrap(value.id);
              }),
                          
              items: value.content.data
          };
      }
      
  • controls

    Type: object, can be observable

    Template binding for carousel controls, uses options from Knockout template binding. Please, see Knockout documentation for details.

    Default values of controls object:

    • name

      Type: string, can be observable (default: 'carouselControls')

      Name of controls temlate for carousel. Default template:

      <a class="left carousel-control" data-bind="attr: { href: id }" data-slide="prev">
          <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" data-bind="attr: { href: id }" data-slide="next">
          <span class="icon-next"></span>
      </a>
      
    • data

      Type: object, can be observable

      Data for controls template. For default template, it should contains id property.

    • dataConverter

      Type: function

      Function, which creates data object for controls template. Accepts binding value as parameter. Will be ignored, if data property is specified. Default function:

      function(value) {
          return {
              id: ko.computed(function() {
                  return '#' + ko.unwrap(value.id);
              })
          };
      }
      

Default values

Default values for carousel binding located in ko.bindingHandlers.carousel.defaults object. It contains default css for root element of carousel and default values for controls, indicators and item templtates. Can be changed before ko.applyBindigs() is called.

defaults: {
    css: 'carousel slide',

    controlsTemplate: {
        name: 'carouselControls',
        templateEngine: ko.stringTemplateEngine.instance,
        dataConverter: function(value) {
            return {
                id: ko.computed(function() {
                    return '#' + ko.unwrap(value.id);
                })
            };
        }
    },
        
    indicatorsTemplate: {
        name: 'carouselIndicators',
        templateEngine: ko.stringTemplateEngine.instance,
        dataConverter: function(value) {
            return {
                id: ko.computed(function() {
                    return '#' + ko.unwrap(value.id);
                }),
                    
                items: value.content.data
            };
        }
    }, 
        
    itemTemplate: {
        name: 'carouselContent',
        templateEngine: ko.stringTemplateEngine.instance,

        converter: function (item) {
            return item;
        }
    }
}

Binding to Bootstrap pagination component.

Examples

Html markup

<div data-bind="pagination: { currentPage: page, totalCount: total, maxPages: maxPages, directions: directions, boundary: boundary, text: text }"></div>

View model

function PaginationExampleViewModel() {
    this.page = ko.observable(1);
    this.total = ko.observable(100);
    this.maxPages = ko.observable(5);
    this.directions = ko.observable(true);
    this.boundary = ko.observable(true);
    this.text = {
        first: ko.observable('First'),
        last: ko.observable('Last'),
        back: ko.observable('«'),
        forward: ko.observable('»')
    };
}

Options

All of the options can be observables.

data-bind="pagination: { currentPage: page, totalCount: count, pageSize: size, maxPages: maxPages, directions: directions, boundary: boundary, text: textObj }"
  • currentPage

    Type: number, should be observable (default: 1)

    Contains selected page.

  • totalCount

    Type: number, can be observable

    Contains total count of items, for which paging is used. Used to determine pages amount.

  • pageSize

    Type: number, can be observable (default: 10)

    Specifies amount of items per page. Used to determine pages amount.

  • maxPages

    Type: number, can be observable (default: 5)

    Specifies maximum amount of pages, which will be displayed in pagaination control.

  • directions

    Type: boolean, can be observable (default: true)

    Specifies, should back and forward buttons be displayed.

  • boundary

    Type: boolean, can be observable (default: true)

    Specifies, should last and first buttons be displayed.

  • text

    Type: object, can be observable

    Contains text for first, last, back and forward buttons.

    Default values of text object:

    • first

      Type: string, can be observable (default: 'First')

      Contains text for "First" button

    • last

      Type: string, can be observable (default: 'Last')

      Contains text for "Last" button

    • back

      Type: string, can be observable (default: '«')

      Contains text for "Back" button

    • forward

      Type: string, can be observable (default: '»')

      Contains text for "Forward" button

Binding to Bootstrap pager component.

Examples

Html markup

<div data-bind="pager: { currentPage: page, totalCount: total, isAligned: aligned, text: text }"></div>

View model

function PagerExampleViewModel() {
    this.page = ko.observable(1);
    this.total = ko.observable(100);
    this.aligned = ko.observable(false);
    this.text = {
        back: ko.observable('←'),
        forward: ko.observable('→')
    };
}

Options

All of the options can be observables.

data-bind="pager: { currentPage: page, totalCount: count, pageSize: size, isAligned: aligned, text: textObj }"
  • currentPage

    Type: number, should be observable (default: 1)

    Contains selected page.

  • totalCount

    Type: number, can be observable

    Contains total count of items, for which paging is used. Used to determine pages amount.

  • pageSize

    Type: number, can be observable (default: 10)

    Specifies amount of items per page. Used to determine pages amount.

  • isAligned

    Type: boolean, can be observable (default: false)

    If true, adds next and previous css classes to buttons.

  • text

    Type: object, can be observable

    Contains text for back and forward buttons.

    Default values of text object:

    • back

      Type: string, can be observable (default: '←')

      Contains text for "Back" button

    • forward

      Type: string, can be observable (default: '→')

      Contains text for "Forward" button

This binding adds or removes one or more CSS classes to the associated DOM element. Can be used, when you need to use Knockout css binding with static and dynamic classes simultaneously. In this case, you may use css binding for static classes and class binding for dynamic classes.

Examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec pharetra eros. Sed luctus vitae ligula viverra porttitor. Vestibulum porttitor egestas lacus.

Html markup

<p class="class-example-text" data-bind="class: className">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec pharetra eros.
    Sed luctus vitae ligula viverra porttitor. Vestibulum porttitor egestas lacus.
</p>
<div class="btn-group form-group" data-toggle="buttons" data-bind="radio: className">
    <label class="btn btn-primary">
    <input type="radio" name="options" value="bg-primary" />
        bg-primary
    </label>
    <label class="btn btn-primary">
    <input type="radio" name="options" value="bg-success" />
        bg-success
    </label>
    <label class="btn btn-primary">
    <input type="radio" name="options" value="bg-danger" />
        bg-danger
    </label>
</div>

View model

function ClassExampleViewModel() {
    this.className = ko.observable('bg-primary');
}

Options

data-bind="class: className"
  • className

    Type: string, can be observable

    Contains class name or list of class names, separated by space.

Knockstrap provides implementation of Knockout-compatible stringTemplateEngine, which can use strings as html templates.

For developers, constructor of engine available via ko.stringTemplateEngine. Also it contains instance property, so it isn't necessary to create your own. It can be used everywhere, where Knockout's nativeTemplateEngine is acceptable.

Template engine contains storage of templates, which is shared between all instances.

API

stringTemplateEngine contains:

addTemplate(name, template)
Adds new template with given name to engine storage
  • name

    Type: string

    Name of new template. If template already exists - it will be overwritten.

  • template

    Type: string

    Body of template. May contain any html.

removeTemplate(name)
Removes template with given name from engine storage
  • name

    Type: string

    Name of template for deleting. If template doesn't exist - nothing happens.

getTemplate(name)
Returns template with given name from engine storage or returns undefined, if there is no template
  • name

    Type: string

    Name of template.

isTemplateExist(name)
Return true, if template with given name was saved in engine storage. Otherwise - false.
  • name

    Type: string

    Name of template.

instance
Instance of stringTemplateEngine.

Examples

String template engine:

Native template engine:

Html markup

<p>String template engine:</p>
<p data-bind="template: { name: 'demo', templateEngine: ko.stringTemplateEngine.instance }"></p>
<p>Native template engine:</p>
<p data-bind="template: { name: 'demo' }"></p>
            
<script id="demo" type="text/html">
    <span>It's a <strong>native template engine</strong>!</span>
</script>

View model

var ste = ko.stringTemplateEngine.instance;

ste.addTemplate('demo', '<span>It\'s a <strong>string template engine</strong>!</span>');