使用 bootstrap 3.37 header 下拉菜单并将 jquery 翻译为 knockoutJS

2024-01-11

我正在查看这篇文章,以在我的 mvc5 knockoutjs 解决方案中应用带有下拉菜单的标题菜单。

https://jdmdigital.co/news/codex/bootstrap-3-secondary-dropdown-menu/ https://jdmdigital.co/news/codex/bootstrap-3-secondary-dropdown-menu/

前端看起来不错,在我的解决方案中也可以,但是,我不知道如何绑定 js 部分来工作。 现在,当我单击下拉父项时,没有任何反应,因为 js 代码不起作用。

这是我的 js (knockoutjs) 文件的设置。

define(['durandal/system', 'plugins/router', 'durandal/services/logger', 'knockout', 'common', 'plugins/dialog', 'durandal/binder', 'fastclick'],
    function (system, router, logger, ko, common, dialog, binder, fs) {
        var shell = {
            activate: activate,
            router: router,
        };

        // Make Dropdown Submenus possible
        $('.dropdown-submenu a.dropdown-submenu-toggle').on("click", function (e) {
            $('.dropdown-submenu ul').removeAttr('style');
            $(this).next('ul').toggle();
            e.stopPropagation();
            e.preventDefault();
        });
        // Clear Submenu Dropdowns on hidden event
        $('#bs-navbar-collapse-1').on('hidden.bs.dropdown', function () {
            $('.navbar-nav .dropdown-submenu ul.dropdown-menu').removeAttr('style');
        });


        //...
        //...
        //OTHER INIT METHODS (not in the scope for this question)
        //#region Internal Methods
        function activate() {
            var result = registerRoutes();
            //setRouteGuard();
            if (window.cordova) {
                window.document.addEventListener("deviceready", function () {
                    shell.refreshUserData(true);
                    shell.changeLanguage();
                });
            } else {
                shell.refreshUserData(true);
                shell.changeLanguage();
            }
            shell.isLoading.subscribe(function (newValue) {
                //if something gone wrong
                if (newValue) {
                    setTimeout(function () {
                        //shell.isLoading(false);
                    }, 10000);
                }
            });

            if (router.activeInstruction().config.moduleId == "viewmodels/parentschedule") {
                if (shell.isAnonymousUser() == true) {
                    shell.isClient(false);
                    shell.isEmployee(false);
                }
                else {
                    shell.isClient(true);
                    shell.isEmployee(true);
                }
                //console.log("test");
            }

            return result;
        }


        function route(r, moduleId, name, visible, alwaysVisible, role, condition) {
            var self = this;
            self.route = r;
            self.moduleId = moduleId;
            self.title = name;
            self.visible = visible;
            self.nav = true;
            self.role = role;
            self.condition = condition;
            self.mouseover = ko.observable(false);
            self.onhover = function () {
                self.mouseover(!self.mouseover());
            };
            self.goToPage = function () {
                router.navigate(this.hash);
            };
            self.alwaysVisible = alwaysVisible;
            self.isTouched = ko.observable(false);
            self.setTouched = function () {
                self.isTouched(true);
                return true;
            }
            self.setUnTouched = function () {
                setTimeout(function () {
                    self.isTouched(false);
                }, 200);
                return true;
            }
            self.isActiveMenuItem = ko.computed(function () {
                return router.activeInstruction() &&
                    router.activeInstruction().fragment.indexOf(self.route) > -1
            });
            return self;
        }
        //#endregion
    });


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 bootstrap 3.37 header 下拉菜单并将 jquery 翻译为 knockoutJS 的相关文章

  • 摩卡 - Chai Karma“套件未定义”

    我对 jscript tdd 很陌生 遇到了问题 希望有人能告诉我我在做什么 在浏览器中运行测试 通过 HTML 文件 一切正常 通过节点和业力运行它们我得到以下异常 我想在 node js 主机的 karma 中使用 Mocha 和 Ch
  • 可以在初始 DOM 解析期间/之前修改 DOM 吗?

    是否可以在初始 DOM 解析期间或之前修改 DOM 或者我是否必须等到 DOM 被解析和构建之后才能与其交互 更具体地说 是否有可能阻止 DOM 中的脚本元素使用用户脚本 内容脚本或 Chrome 或 Firefox 中的类似脚本运行 在解
  • React-Redux:state.setIn() 和 state.set() 有什么区别?

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo
  • 如何将函数附加到弹出窗口关闭事件(Twitter Bootstrap)

    我做了一些搜索 但我只能认为我可以将事件附加到导致其关闭的按钮 https stackoverflow com questions 13205103 attach event handler to button in twitter boo
  • JQuery Mobile 与 MVC 的链接

    我正在使用 ASP NET MVC 3 和 Razor UI 设置 JQuery 移动网站 我正在生成我的链接 例如 a href See Group 2 a 假设我从 Home Index 访问它 我遇到的问题是 当我点击链接时 它会出现
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • Chrome 扩展程序在代码中使用 client_secret

    我正在开发具有自己的 oAuth 授权的 Google Chrome 扩展 当然 我必须使用 client id 和 client secret 作为请求令牌 有什么办法可以向用户隐藏这些数据吗 由于此请求只是 javascript 源代码
  • 表单身份验证 MVC4

    我正在尝试使用 MVC4 网站进行简单的表单身份验证设置 在App start FilterConfig cs中 public static void RegisterGlobalFilters GlobalFilterCollection
  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco
  • window.location 和 location.href 之间的区别

    我对之间的区别感到困惑window location and location href 两者似乎都以相同的方式行事 有什么不同 window location是一个对象 它保存有关当前文档位置的所有信息 主机 href 端口 协议等 lo
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 有没有办法在 onclick 触发时禁用 iPad/iPhone 上的闪烁/闪烁?

    所以我有一个有 onclick 事件的区域 在常规浏览器上单击时 它不会显示任何视觉变化 但在 iPad iPhone 上单击时 它会闪烁 闪烁 有什么办法可以阻止它在 iPad iPhone 上执行此操作吗 这是一个与我正在做的类似的示例
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • Vue 和 Vuex:处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个
  • 代码镜像错误:未捕获错误:扩展集中无法识别扩展值([对象对象])

    全部 我目前正在从事一个React Electron项目 该项目的目标是完成一个Markdown编辑器 当我配置codemirror 该程序报告错误说 Uncaught Error Unrecognized extension value
  • 如何使用 crypto-js 解密 AES ECB

    我正在尝试将加密数据从 flash 客户端 发送到服务器端的 javascript 在 asp 中作为 jscript 运行 有几个 javascript Aes 库 但它们实际上没有文档记录 我正在尝试使用 crypto js 但无法让代
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接

随机推荐