Question

I’ve got a simple view-model going in KO:

        function TemplateFile(name, fileName) {
            var self = this;
            self.name = name;
            self.fileName = fileName;
        }

        var layoutViewModel = {
            loggedInUser: ko.observable("user"),
            templateFiles: ko.observableArray([
                // some initial entries...
            ]),
            contentHeading: ko.observable("Content"),
            // some other things...
        };

        $(function () { ko.applyBindings(layoutViewModel); });

And the data is bound in various points in my _Layout.cshtml partial view, most of them working fine. Except for this one…

        <!-- Page content -->
        <div class="container-fluid" 
             style="background-color: white; border-radius: 10px; margin: 20px; min-height: 400px; height: auto !important; height: 400px">
            <div class="row-fluid">
                <div class="span12">
                    <h1 data-bind="text: contentHeading" style="color: darkgray;" />
                </div>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    @RenderBody()
                </div>
            </div>
        </div>

(ignore the inline CSS, that will be fixed soon ;))

The “contentHeading” data that’s being bound to the h1 is not showing up at all. I tried several things already…

• Switching out the data that’s being bound: still didn’t show up
• Moving the tag around to different parts of the page: some worked, some randomly didn’t
• Hard coding a dummy text value: this DID show up

So, given those results, I’m thinking there might be an issue with the how some of the DOM elements are being loaded, perhaps because I’m using Twitter Bootstrap?

I’m at a loss here, and can’t seem to find a similar issue from anyone else. Any suggestions?

<ul class="dropdown-menu" data-bind="foreach: templateFiles">
    <li>
        <a href="#" data-bind="attr: { title: fileName}" />
        <span data-bind="text: name" />
    </li>
</ul>

Answer 1

<ul class="dropdown-menu" data-bind="foreach: templateFiles">
    <li>
        <a href="#" data-bind="attr: { title: fileName}" />
       <span data-bind="text: name" />
  </li>
</ul>

This isn’t even related to knockout or bootstrap. I just have a tag mismatch. D’oh.

Closing this question! Thanks for the tips on what to look for 🙂