KnockoutJS:跟踪菜单单击 [英] KnockoutJS: Tracking menu clicks

问题描述

我刚刚开始玩KnockoutJS，它很有趣.我成功创建了一些模板，以渲染内部带有"ul"嵌套菜单的界面的两个面板.

I have just started playing with KnockoutJS and it it fascinating. I successfully created some templates to render two panels of an interface with "ul" nested menus inside.

这是我的模板:

<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>

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

And here is the simplified code for my view model:

$(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'当我单击任何超链接时.

So far, the panels and the menus are rendered fine but I now need to know which menu was clicked and show the sub-menu as well as other UI elements based on the clicked menu. The function I attached to the hyperlinks is throwing an exception: 'Uncaught ReferenceError: viewModel is not defined' when I click on any of the hyperlinks.

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

I also tried to bind the visibility of sub-menus to the "currentMenu" property of the viewModel but that broke everything:

<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>

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

How can I properly bind the click event handler as well as the visibility based on the clicked menu?

推荐答案

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

Your issue is that your variable viewModel is defined in the jQuery ready function, so the functions in your data-binds can't see it, since it is not at the global scope. Even, doing a var viewModel = {} outside the $(function() { ... }); would work.

您定义点击功能的方式对我来说很好.但是，您的可见逻辑应使用viewModel.menuActive()和viewModel.currentMenu()来访问表达式中的值.

The way that you defined your click function looks good to me. Your visible logic though should use viewModel.menuActive() and viewModel.currentMenu() to access the values as they are in an expression.

希望这会有所帮助.如果您遇到困难，将很乐意为您提供进一步的帮助.

Hope this helps. Would be happy to help further, if you get stuck.

这篇关于KnockoutJS:跟踪菜单单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！