Question

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!

Answer 1

There were several syntax errors in your code which I imagine are a result of your making it simpler to post.

I have posted a working jsFiddle here: http://jsfiddle.net/Gy6Gv/2/

I changed Menu to be an observable array only because knockout provides the helper method .indexOf to make it easier to get the index of the menu from the mouseover. Other than that there was no problem with the computed. I imagine there is some other syntactical error in your actual code.