Knockout popover

by anup1986

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="https://raw.github.com/CodeSeven/KoLite/master/knockout.activity.js"></script>
<script src="https://raw.github.com/CodeSeven/KoLite/master/knockout.command.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://raw.github.com/lecar-red/bootstrapx-clickover/master/js/bootstrapx-clickover.js"></script>
<div id="page" data-bind="with: theUser">
    <div class="row-fluid">
        <div class="span6"><b>Choose bin</b>
</div>
        <div class="span4">
            <button class="btn" id="popBtn" data-bind="popover: '#binPopover'"><i class="icon-search"></i>
            </button>
            <div class="row-fluid"> <span data-bind="text: choosenBin"></span>
            </div>
        </div>
    </div>
</div>
<script type="html/text" id="binPopover" data-title="Choose bin">
   <div class="row">
    <table class="table table-striped table-hover">    
        <thead>
        <tr>
            <th>Bin loc</th>
            <th>Bin Name</th>
            <th>Qty</th>
            <th>Zone</th>
            <th></th>
        </tr>
        </thead>
        <tbody data-bind="foreach: $data.bins">
        <tr data-bind="click: $parent.chooseBin">
            <td data-bind="text: $data.LagPlats"></td>
            <td data-bind="text: $data.Namn"></td>
            <td data-bind="text: $data.Saldo"></td>
            <td data-bind="text: $data.Zone"></td>
            <td><button class="btn btn-small" data-bind="click: $parent.chooseBin">Test</button></td>
        </tr>
        </tbody>
    </table>
    </div>
    <div class="row">
    <button class="btn btn-warning pull-right" data-bind="click:...

CSS

#page {
    padding: 50px;
}
.popover {
    max-width: 1000px;
}
.popover-content {
    padding: 10px;
    width: auto;
    height: auto;
}
#knockout-popover {
    width: auto;
    height: auto;
}

JavaScript

ko.bindingHandlers.popover = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var cssSelectorForPopoverTemplate = ko.utils.unwrapObservable(valueAccessor());
        var popOverTemplate = "<div id='knockout-popover'>" + $(cssSelectorForPopoverTemplate).html() + "</div>";
        var titleObject = $(cssSelectorForPopoverTemplate);
        var title = titleObject.attr('data-title');

        $(element).popover({
            content: popOverTemplate,
            html: true,
            title: title || '',
            trigger: 'manual'
        });

        $(element).click(function () {
            $(this).popover('toggle');
            var thePopover = document.getElementById("knockout-popover");
            ko.applyBindings(viewModel, thePopover);
        });
    }
};

var user = function (data) {
    var self = this;
    self.bins = ko.observableArray([]);
    self.choosenBin = ko.observable("No bin choosen");
    ko.mapping.fromJS(data, {}, self);

    // Functions
    self.chooseBin = function (bin) {
        self.choosenBin(bin.LagPlats() + " - " + bin.Namn());
    };

    self.closePopover = function () {
        $('#popBtn').popover('toggle');
    };

};

var bin = function (data) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);
};

var binMapping = {
    create: function (options) {
        return new bin(options.data);
    }
};

var BaseRepo = function () {
    var self = this;

    var usr = {
        q_ic_wms_UserId: "anup",
        RespNamn: "Andreas Uppström",
        ForetagKod: 10
    };

    var bins = [{
        LagPlats: "B01",
        Namn: "Hylla 1",
        Saldo: 10.0,
        Zone: "Utleveranszon 1"
    }, {
        LagPlats: "B02",
        Namn: "Hylla 2",
        Saldo: 23,
        Zone: "Plockzon 1"
    }, {
        LagPlats: "B03",
        Namn: "Hylla 3",
        Saldo: 0,
        Zone: "Plockzon 1"
    }];

    self.getUsers = function (callback) {
       ...