Accordion with Bootstrap + Knockoutjs

Trying to get a Bootstrap accordion to work with Knockout bindings

by andrewransom

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<div class='liveExample'>
     <h4>This is the vanilla accordion cut and pasted straight from the Bootstrap Docs. It works!</h4>

    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                      Collapsible Group Item #1
                    </a>

            </div>
            <div id="collapseOne" class="accordion-body collapse in">
                <div class="accordion-inner">Blah blah blah 1.</div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                      Collapsible Group Item #2
                    </a>

            </div>
            <div id="collapseTwo" class="accordion-body collapse">
                <div class="accordion-inner">Blah blah blah 2.</div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                      Collapsible Group Item #3
                    </a>

            </div>
            <div id="collapseThree" class="accordion-body collapse">
                <div class="accordion-inner">Blah blah blah 3.</div>
            </div>
        </div>
    </div>
    
<h4> <i class="icon-question-sign icon-2x"></i> Why aren't these accordion items toggling open/closed?</h4> 
    <div class="accordion" id="accordion-testitem-list">
        <!-- ko foreach : { data: items, as: 'testitem' } -->
        <div class="accordion-group">
            <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse"...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 @import url('http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css');

JavaScript

var demoModel = function (items) {
    this.items = ko.observableArray(items);
    this.itemToAdd = ko.observable("");
    this.addItem = function () {
        if (this.itemToAdd() != "") {
            this.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
            this.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable
        }
    }.bind(this); // Ensure that "this" is always this view model
};

ko.applyBindings(new demoModel([{
    "ID": 2,
        "Name": "Item 2",
        "Description": "This is item number two."
}, {
    "ID": 3,
        "Name": "Item 3",
        "Description": "This is item number three."
}, {
    "ID": 4,
        "Name": "Item 4",
        "Description": "This is item number four."
}]));