Auto-Generate Div Ids for Bootstrap Accordion Menu Binding with Knockout Js

function Accordion(items, openIndex) {    var self = this;    self.items = ko.observableArray(items);    self.openItem = ko.observable(items[openIndex]);}
var items = [    {header: "Item 1", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."},    {header: "Item 2", content: "Mauris at metus eget eros ultrices lobortis."},    {header: "Item 3", content: "Nunc lorem elit, facilisis in ante vitae, viverra pretium tortor."}];
ko.applyBindings( new Accordion(items, 1) );

ul.accordion {    padding-left: 0;    list-style: none;    border-top: 1px solid silver;}ul.accordion > li {    padding: 5px;    border-bottom: 1px solid silver;}ul.accordion > li > .content {    display: none;}ul.accordion > li > .header {    cursor: pointer;    font-weight: bold;}ul.accordion > li.accordion-open > .header {    cursor: auto;}ul.accordion > li.accordion-open > .content {    display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul class="accordion" data-bind="foreach: items">    <li data-bind="css: {'accordion-open': $data === $parent.openItem()}, click: $parent.openItem">        <div class="header" data-bind="text: header"></div>        <div class="content" data-bind="text: content"></div>    </li></ul>

Multilevel Menu using Knockout JS and Bootstrap

Partial answer:
You have a text binding on the anchor that is supposed to have a caret inside it. The text binding will overwrite all contents, which is why you get no caret. Instead:

    <a href="#" class="dropdown-toggle" data-bind="visible: children().length > 0" 
       data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        <span data-bind="text: name"></span>
        <span class="caret"></span>
    </a>

My fiddle.

I still don't get submenus, but the caret does indicate that the HTML knows about Don's children. This example might help.

Officially, it looks like submenus are unsupported in Bootstrap 3.

knockout.js and bootstrap modal dialog

PICNIC :-)

The bindings on the input tag should have been value not text... I've been looking at that on and off for a day - within 10 mins of posting the answer hits me!

Knockout Twitter Bootstrap Popover Binding

You need to use my old friend, custom bindings.

ko.bindingHandlers.withProperties = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // Make a modified binding context, with a extra properties, and apply it to descendant elements
        var newProperties = valueAccessor(),
            innerBindingContext = bindingContext.extend(newProperties);
        ko.applyBindingsToDescendants(innerBindingContext, element);

        // Also tell KO *not* to bind the descendants itself, otherwise they will be bound twice
        return { controlsDescendantBindings: true };
    }
};

You then need to add a data-bind attribute to the html you are generating:

    var tmplDom = $('<div/>', {
        "class": "ko-popover",
        "id": domId,
        "data-bind": "withProperties: { label: '" + viewModel.label() + "', required: '" + viewModel.required() + "' }"

I've put together a jsFiddle showing this. There were a couple of gotchas, I had to copy the popover options for each popover, otherwise they all ended up with the last set of values.

    var popoverOptions = $.extend({}, ko.bindingHandlers.popover.options);
    popoverOptions.content = options.content;

And I also had to apply binding to the popup only if it is visible, otherwise it appears to attempt to bind to the whole page.

$(element).bind('click', function () {
            $(this).popover(popoverOptions).popover('toggle');
            // If you apply this when the popup isn't visible, I think that it tries to bind to thewhole pageand throws an error
            if($('#' + domId).is(':visible'))
            {
                ko.applyBindings(viewModel, $('#' + domId)[0]);
            }
        });

This also appears to be 2-way, in that you can change the values in the popup and it updates the non-popup elements, but I won't lie, I didn't expect that to happen!

Load page asynchronously in Knockoutjs

here is a working fiddle for databinding the jquery select2 from an ajax call.
http://jsfiddle.net/LkqTU/33425/

not sure if there is a better way to do it but I put the data in the update portion of the custom binding instead of the init since it is being loaded by ajax and may not be their at first.

ko.bindingHandlers.select2 = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
         ko.bindingHandlers.value.init(element,valueAccessor, allBindings);
          $(element).select2({
          })
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var data = allBindings.get('select2Data');
         var dataUnwrapped = ko.toJS(data);
          $(element).select2({
               data: dataUnwrapped
          })
       var value = valueAccessor();
       ko.bindingHandlers.value.update(element,valueAccessor);
    }
};

---

Related Topics