why din’t computed don’t track changes in this simple knockout app?

Programming in javascript: why din’t computed don’t track changes in this simple knockout app? on newest questions tagged javascript – Stack Overflow

The menu is what I want, when mouse over the left, the right should changes but doesn’t.

Here is my simplified viewmodel:

var currentSelectIndex  = 0;

var AppModel = {
    CurrentIndex: ko.observable(currentSelectedIndex),
    OnMouseOver: function (data, event) {
        // change currentIndex or currentSelectedIndex here
        // CurrentSubCategory didn't updated
    },
    CurrentSubCategory: ko.computed({
        read: function() {
            return AppModel.Menu[AppModel.CurrentIndex()].subcategory;
        },
        deferEvaluation: true
    }),
    Menu: [
    {
        subcategory: [
            { name: '1', id: 50000436 },
            { name: '2', id: 50010402 },
            { name: '3', id: 50010159 }
        ],
    }
};

And my html:

<div class="categories" id="categories">
    <div class="first-category" id="first-category">
        <ul data-bind="foreach:Menu">
            <li data-bind="text:name,attr:{id:id,class:className},event{ mouseover: $root.myfunction}"></li>
        </ul>
    </div>
    <div class="sub-category" id="sub-category">
        <ul data-bind="foreach:CurrentSubCategory()">
            <li><a data-bind="text:name,attr:{href:getListUrl(id)}"></a></li>
        </ul>
        <div class="clear">
        </div>
    </div>
    <div class="clear">
    </div>
</div>

Sorry, can’t post images due to less than 10 reputation.

Thanks for any help!

source: http://stackoverflow.com/questions/11202658/why-dint-computed-dont-track-changes-in-this-simple-knockout-app
Programming in javascript: programming-in-javascript