javascript - 为什么不计算不跟踪这个简单的淘汰赛应用程序的变化？

Question

菜单是我想要的，当鼠标悬停在左边时，右边应该改变但不会。

这是我的简化视图模型：

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 }
        ],
    }
};

还有我的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>

抱歉，由于声望低于 10，无法发布图片。

谢谢你的帮助！

Answer 1

您的代码中有几个语法错误，我想这是您简化发布的结果。

我在这里发布了一个有效的 jsFiddle：http: //jsfiddle.net/Gy6Gv/2/

我将 Menu 更改为一个可观察的数组只是因为敲除提供了辅助方法 .indexOf 以便更容易地从鼠标悬停获取菜单的索引。除此之外，计算没有问题。我想您的实际代码中还有其他一些语法错误。