Utilizing Knockout.js to Enhance Bootstrap Popovers

Question

Utilizing Knockout.js to Enhance Bootstrap Popovers

My application is receiving data through AJAX calls and then binding the received data to DOM elements using knockout.js library. I want to utilize bootstrap's unobtrusive markup to create popovers in the following manner:

<table class="table table-condensed" data-bind="foreach: items">
    <tr>
        <td><b data-bind="text: $data.id"></b></td>
        <td data-bind="text: $data.title"></td>
        <td><a href="#" rel="popover" data-bind="attr: {title: $data.info}" data-placement="top">Info</a></td>
    </tr>
</table>

Even though the latest bootstrap documentation suggests that an implicit call like $('.popover').popover() is not necessary, it doesn't seem to be working for me.

I believe that bootstrap.js analyzes the DOM on document.ready and performs all required actions for popovers to work properly. So my question is, is there a way to instruct bootstrap.js to analyze new data after an AJAX response and apply the necessary functions? Or is there another method to meet this requirement?

ajax twitter-bootstrap knockout.js

Answer 1

Answer №1

To implement a custom dataBinding for creating a popover effect on an element, you can refer to this JSFiddle demo

ko.bindingHandlers.bootstrapPopover = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var options = ko.utils.unwrapObservable(valueAccessor());
        var defaultOptions = {};        
        options = $.extend(true, {}, defaultOptions, options);
        $(element).popover(options);
    }
};

var viewModel = {

    items: ko.observableArray([{
        "id": 1,
        "title": "title-1",
        "info": "info-1"},
    {
        "id": 2,
        "title": "title-2",
        "info": "info-2"},
    {
        "id": 3,
        "title": "title-3",
        "info": "info-3"}])

}

ko.applyBindings(viewModel);

Here is the HTML structure:

<div class="container">
    <div class="hero-unit">     
        <table class="table table-condensed" data-bind="foreach: items">
            <tr>
                <td><b data-bind="text: $data.id"></b></td>
                <td data-bind="text: $data.title"></td>
                <td><a href="#" data-bind="bootstrapPopover : {content : $data.info  }">Info</a></td>
            </tr>
        </table>
    </div>
</div>

Answer 2

To implement a custom dataBinding for creating a popover effect on an element, you can refer to this JSFiddle demo

ko.bindingHandlers.bootstrapPopover = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var options = ko.utils.unwrapObservable(valueAccessor());
        var defaultOptions = {};        
        options = $.extend(true, {}, defaultOptions, options);
        $(element).popover(options);
    }
};

var viewModel = {

    items: ko.observableArray([{
        "id": 1,
        "title": "title-1",
        "info": "info-1"},
    {
        "id": 2,
        "title": "title-2",
        "info": "info-2"},
    {
        "id": 3,
        "title": "title-3",
        "info": "info-3"}])

}

ko.applyBindings(viewModel);

Here is the HTML structure:

<div class="container">
    <div class="hero-unit">     
        <table class="table table-condensed" data-bind="foreach: items">
            <tr>
                <td><b data-bind="text: $data.id"></b></td>
                <td data-bind="text: $data.title"></td>
                <td><a href="#" data-bind="bootstrapPopover : {content : $data.info  }">Info</a></td>
            </tr>
        </table>
    </div>
</div>

Answer 3

Answer №2

"I recently came across the bootstrap documentation stating that automatically calling something like $('.popover').popover() is not necessary, but it doesn't seem to be working."

I couldn't find any mention of this in the docs. In fact, they explicitly say the opposite. Twitter Bootstrap does not initialize popovers or tooltips on a page by default. According to the documentation:

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

To "opt in", as stated, you need to attach the Popover object to an element containing all potential popovers on the page. One way to do this is:

$('body').popover({selector: '[rel="popover"]'});

The original performance concerns stemmed from the plugin being triggered by mouseenter and mouseleave events prior to version 2.1, which could result in unnecessary processing for the entire page. As of 2.1, the default trigger is now click, alleviating any performance issues. It's recommended to attach the Popover object to an element deeper in the DOM than body, but if displaying AJAX content, using body may be the best solution.

Answer 4

"I recently came across the bootstrap documentation stating that automatically calling something like $('.popover').popover() is not necessary, but it doesn't seem to be working."

I couldn't find any mention of this in the docs. In fact, they explicitly say the opposite. Twitter Bootstrap does not initialize popovers or tooltips on a page by default. According to the documentation:

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

To "opt in", as stated, you need to attach the Popover object to an element containing all potential popovers on the page. One way to do this is:

$('body').popover({selector: '[rel="popover"]'});

The original performance concerns stemmed from the plugin being triggered by mouseenter and mouseleave events prior to version 2.1, which could result in unnecessary processing for the entire page. As of 2.1, the default trigger is now click, alleviating any performance issues. It's recommended to attach the Popover object to an element deeper in the DOM than body, but if displaying AJAX content, using body may be the best solution.

Answer 5

Answer №3

Check out this fully functioning example featuring an array of objects. I made a small tweak by switching from using ko.applyBindings() to ko.applyBindingsToDescendants. This change allows us to include the binding context $root and $parent when connecting a button, for instance, to a function in a root viewModel.

$(element).click(function() {
            $(this).popover('toggle');
            var thePopover = document.getElementById(attribute.id+"-popover");
            childBindingContext = bindingContext.createChildContext(viewModel);
            ko.applyBindingsToDescendants(childBindingContext, thePopover);
    });

You can view the example @ http://jsfiddle.net/mounir/Mv3nP/6/

Answer 6

Check out this fully functioning example featuring an array of objects. I made a small tweak by switching from using ko.applyBindings() to ko.applyBindingsToDescendants. This change allows us to include the binding context $root and $parent when connecting a button, for instance, to a function in a root viewModel.

$(element).click(function() {
            $(this).popover('toggle');
            var thePopover = document.getElementById(attribute.id+"-popover");
            childBindingContext = bindingContext.createChildContext(viewModel);
            ko.applyBindingsToDescendants(childBindingContext, thePopover);
    });

You can view the example @ http://jsfiddle.net/mounir/Mv3nP/6/

Utilizing Knockout.js to Enhance Bootstrap Popovers

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to center the image on a page?

Concealing a div based on a condition

What is the most effective way to utilize bootstrap classes and their associated functions exclusively for mobile devices by using media queries?

Is anyone else experiencing issues with their imagemap due to Twitter Bootstrap?

Issues with iOS 7's absolute positioning not functioning properly within a table-responsive container

The Bootstrap navbar-fixed-top is failing to function properly within the confines of my "content" div

Altering the color of a div based on a specified value condition

The navigation bar is showing my logo in a blurry and small format when viewed on a desktop

Setting up button alignment in Bootstrap

The bootstrap navbar dropdown feature isn't functioning properly on iPhones

What is the reasoning behind setting the perspective to 1000 for carousel items in Bootstrap?

Switching Column Content with jQuery on Mobile Devices

Conceal navigation options on smaller screens and enable drop-down menu functionality with Bootstrap 3

Using jQuery AJAX to preload GIF images for CSS background-image loading

Adjust the container within the column to match the height of the column in the bootstrap grid

Tips for incorporating a tooltip into a disabled selectpicker option

Issues with Bootstrap's center-block functionality

What is the method for changing the icon color to dark in Twitter Bootstrap?

Move the components over to the right

In bootstrap 3.0, columns are arranged in a vertical stack only