Question

I’m trying to read the value of an observable while inside it’s subscribe method and it always returns an object instead of what should be the value (true or false).

Check out the fiddle or the code below:
http://jsfiddle.net/StrandedPirate/WP3s9/

All I want is for only one item in a an observableArray to have its isSelected property set to true at a time. If there is another way to do this without loops or subscriptions let me know but this is were I ended up.

var menuViewModel = (function () {
    function _constructor(error, details) {
        var self = this;
        self.items = ko.observableArray();

        // add the menu items
        self.items.push(new menuItemModel("Dashboard"));
        self.items.push(new menuItemModel("Content Management"));

        self.handleIsSelectedChange = function (item) {
            // issue: item.isSelected() returns [object Object] instead of true/false
            console.log("inside subscription function: " + item.title() + ", isSelected: " + item.isSelected());

            // this fails because it doesn't return true/false it returns returns [object Object]
            if (item.isSelected() === true) {
                console.log("subscription fired: " + item.title());
                // de-select all other items
                ko.utils.arrayForEach(self.items(), function (subItem) {
                    if (subItem.title() !== item.title()) {
                        console.log("deselecting: " + subItem.title());
                        subItem.isSelected(false);
                    }
                });
            }
        };

        self.subscribeToItems = function () {
            console.log("subscribeToItems called");
            ko.utils.arrayForEach(self.items(), function (item) {
                console.log("title: " + item.title() + ", isSelected: " + item.isSelected());
                item.isSelected.subscribe(function (currentItem) {
                    self.handleIsSelectedChange(currentItem);
                });
            });
        };
    };

    return _constructor;
})();

var menuItemModel = (function () {
    function _constructor(title, icon) {
        var self = this;
        self.title = ko.observable(title || "");
        self.icon = ko.observable(icon || "");
        self.isSelected = ko.observable(false);
    };
    return _constructor;
})();


var menuVM = new menuViewModel();
menuVM.subscribeToItems();
ko.applyBindings(menuVM, $(".mainMenu").get(0));

Answer 1

When you bind against click: isSelected, this will call your function passing the current data item as the first argument.

Since, isSelected is an observable, passing the first item will set it to that value. So, isSelected becomes the object itself.

You would probably want to create a toggleSelected function on your item that does this.isSelected(!this.isSelected()).

Subscriptions are passed the new value, so true/false in your case, but it looks like you want to operate on the item itself.

Here is a sample where we still pass the item to your handler when the subscription is triggered.

http://jsfiddle.net/rniemeyer/WP3s9/31/

Another option might be setting the context of the handler to your item and using this in the handler. Something like: http://jsfiddle.net/rniemeyer/WP3s9/32/