I'm trying to create some tabs, one per profile the user chooses to save. Each profile is a ViewModel. So I thought I'd just create another ViewModel that contains an observableArray of objects of type: {name: profile_name, model: model_converted_to_json}.

I followed this example to create my code - but I get nothing bound, for some reason.

Here's my code:
-ViewModel (I use Requirejs, that explains the external wrapper):

"use strict";
// profiles viewmodel class
define(["knockout"], function(ko) {
    return function() {
        var self = this;
        this.profilesArray = ko.observableArray();
        this.selected = ko.observable();
        this.addProfile = function(profile) {
            var found = -1;
            for(var i = 0; i < self.profilesArray().length; i++) {
                if(self.profilesArray()[i].name == profile.name) {
                    self.profilesArray()[i].model = profile.model; 
                    found = i;
                }
            }
            if(found == -1) {
                self.profilesArray().push(profile);
            }
        };
    };
}); 

-The JS code (excerpt of larger file):

var profiles = new profilesViewMode();
ko.applyBindings(profiles, $("#profileTabs")[0]); 
$("#keepProfile").on("click", function() {
    var profile = {
        name: $("#firstName").text(),
        model: ko.toJSON(model)
    };
    profiles.addProfile(profile);
    profiles.selected(profile);
    console.log(profile);
    $("#profileTabs").show();
});

-The HTML (Thanks Sara for correcting my HTML markup)

<section id="profileTabs">
    <div>
        <ul class="nav nav-tabs" data-bind="foreach: profilesArray">
            <li data-bind="css: { active: $root.selected() === $data }">
                <a href="#" data-bind="{ text: name, click: $root.selected }"></a>
            </li>
        </ul>
    </div>
</section>

I have verified that the observableArray does get new, correct value on button click - it just doesn't get rendered. I hope it's a small thing that I'm missing in my Knockout data-bind syntax.

Thanks for your time!

I'm trying to create some tabs, one per profile the user chooses to save. Each profile is a ViewModel. So I thought I'd just create another ViewModel that contains an observableArray of objects of type: {name: profile_name, model: model_converted_to_json}.

I followed this example to create my code - but I get nothing bound, for some reason.

Here's my code:
-ViewModel (I use Requirejs, that explains the external wrapper):

"use strict";
// profiles viewmodel class
define(["knockout"], function(ko) {
    return function() {
        var self = this;
        this.profilesArray = ko.observableArray();
        this.selected = ko.observable();
        this.addProfile = function(profile) {
            var found = -1;
            for(var i = 0; i < self.profilesArray().length; i++) {
                if(self.profilesArray()[i].name == profile.name) {
                    self.profilesArray()[i].model = profile.model; 
                    found = i;
                }
            }
            if(found == -1) {
                self.profilesArray().push(profile);
            }
        };
    };
}); 

-The JS code (excerpt of larger file):

var profiles = new profilesViewMode();
ko.applyBindings(profiles, $("#profileTabs")[0]); 
$("#keepProfile").on("click", function() {
    var profile = {
        name: $("#firstName").text(),
        model: ko.toJSON(model)
    };
    profiles.addProfile(profile);
    profiles.selected(profile);
    console.log(profile);
    $("#profileTabs").show();
});

-The HTML (Thanks Sara for correcting my HTML markup)

<section id="profileTabs">
    <div>
        <ul class="nav nav-tabs" data-bind="foreach: profilesArray">
            <li data-bind="css: { active: $root.selected() === $data }">
                <a href="#" data-bind="{ text: name, click: $root.selected }"></a>
            </li>
        </ul>
    </div>
</section>

I have verified that the observableArray does get new, correct value on button click - it just doesn't get rendered. I hope it's a small thing that I'm missing in my Knockout data-bind syntax.

Thanks for your time!

• javascript
• data-binding
• twitter-bootstrap
• knockout.js

Share Improve this question Follow edited Nov 7, 2012 at 19:51 Traveling Tech Guy asked Nov 7, 2012 at 18:56 Traveling Tech GuyTraveling Tech Guy 27.8k2525 gold badges116116 silver badges166166 bronze badges 4

• This might help your html issue meta.stackexchange./questions/110126/… – jes Commented Nov 7, 2012 at 19:31
• That's what I tried doing (and just re-tried - several times) - still, the HTML code does not show – Traveling Tech Guy Commented Nov 7, 2012 at 19:34
• Your ordered list is interfering with the code formatting. – Sara Commented Nov 7, 2012 at 19:46
• Thanks Sara! That was it. Now I have all my code listed. – Traveling Tech Guy Commented Nov 7, 2012 at 19:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You will want to call push directly on the observableArray, which will both push to the underlying array and notify any subscribers. So:

self.profilesArray.push(profile);

You are setting name using name: $('#firstName').text(); you may need to change that to .val() if this is referencing an input field (which I assumed here).

You are using .push() on the underlying array which bypasses ko's subscribers (the binding in this case)

Here is a working jsfiddle based on your code. I took some liberties with model since that wasn't included.