KnockoutJS：跟踪菜单点击

Question

我刚开始玩 KnockoutJS，它很吸引人。我成功创建了一些模板来呈现一个界面的两个面板，其中包含“ul”嵌套菜单。

这是我的模板：

<script id="menuItemTemplate" type="text/html">
    <li class='${ Class }' >
        <a class='${ Class }' data-bind='click: function() { viewModel.menuClicked(Id); }'>${ Name }</a>
        <ul class='${ Class }' data-bind='template: { name: "menuItemTemplate", foreach: Items }'></ul>
    <li>
</script>
<script id="menuTemplate" type="text/html">
    <ul class='${ Class }' data-bind='template: { name: "menuItemTemplate", foreach: Items }'></ul>
</script>
<script id="consoleTemplate" type="text/html">
    <div class='${ Class }' data-bind='template: { name: "menuTemplate", data: Menu }'></div>
</script>
<h2>Application Administration</h2>
<div id="console" class="console" data-bind='template: { name: "consoleTemplate", foreach: Panels }'>
</div>

这是我的视图模型的简化代码：

$(function () {
var viewModel = {
    "Panels": [
        {
        "Id" : 1,
        "Class": "main",
        "Menu": {
            "Id": 1,
            "Class": "file",
            "Name": "File",
            "Items": [{
                "Id": 1,
                "Class": "open",
                "Name": "Open",
                "Items": []
            }]
        }
    }]
};

    $.ajax({
        url: 'console.asmx/Initialize',
        type: "POST",
        cache: false,
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: "json",
        success: function (data) {
            viewModel = data.d;
            viewModel.menuActive = ko.observable(false);
            viewModel.currentMenu = ko.observable(0);
            viewModel.menuClicked = function (id) {
                viewModel.menuActive(true);
                viewModel.currentMenu(id);
            };
            ko.applyBindings(viewModel);
        }
    });
});

到目前为止，面板和菜单都渲染得很好，但我现在需要知道单击了哪个菜单并根据单击的菜单显示子菜单以及其他 UI 元素。我附加到超链接的函数抛出异常：'Uncaught ReferenceError: viewModel is not defined' 当我单击任何超链接时。

我还尝试将子菜单的可见性绑定到 viewModel 的“currentMenu”属性，但这破坏了一切：

<script id="menuItemTemplate" type="text/html">
    <li class='${ Class }' data-bind='visible: viewModel.menuActive && viewModel.currentMenu == Id'>
        <a class='${ Class }' data-bind='click: function() { viewModel.menuClicked(Id); }'>${ Name }</a>
        <ul class='${ Class }' data-bind='template: { name: "menuItemTemplate", foreach: Items }'></ul>
    <li>
</script>

如何正确绑定单击事件处理程序以及基于单击菜单的可见性？

Answer 1

您的问题是您的变量 viewModel 是在 jQuery 就绪函数中定义的，因此数据绑定中的函数看不到它，因为它不在全局范围内。甚至，在$(function() { ... }); 之外执行var viewModel = {} 也可以。

您定义点击功能的方式对我来说看起来不错。不过，您的可见逻辑应该使用 viewModel.menuActive() 和 viewModel.currentMenu() 来访问表达式中的值。

希望这会有所帮助。如果您遇到困难，我们很乐意提供进一步帮助。