Question

我正在尝试使用以下结构来实现使用ko（2.3.0），requirejs（2.1.9）和durandal（2.0.1）的导航按钮：

名为index.cshtml的文件包括： div命名为applicationHost，它加载： shell.html包括： div包含header.html，其中包括： div包含data.html，它显示相对于登录用户的摘要信息 div包含nav.html，其中包括：所有导航链接。 div包含所有其他视图，具体取决于哪个路由处于活动状态

路由器绑定到shell.html（通过shell.js），使用样板代码创建路由器：

var shell = {
            router: router,
            activate: function () {                    
                router.map(config.routesNLI).buildNavigationModel();
                return router.activate(my.viewToDisplay());
            }
};
return shell;

并使用标准绑定在shell.html中：

<div>
    <!-- ko compose: {model: router.activeItem, afterCompose: router.afterCompose } -->
    <!-- /ko -->
</div>

我拿出过渡：“入口”，因为我读到导致某些人出问题的地方，但这对我的情况没有任何影响。

config.routesNLI由使用此模式的条目组成：

{
    route: 'NLIincontext',
    title: 'In Context',
    moduleId: 'viewmodels/NLIincontext',
    hash: '#/NLIincontext',
    nav: true
}

我将用于将nav.html元素加载到shell.html的html是：

<div>
    <!-- ko compose: {view: 'nav' } -->
    <!-- /ko -->
</div>

这是基于John Papa在其出色的PluralSight课程“Single Page Apps JumpStart”中使用的模式。

当应用程序运行时，显示屏显示正确，当您将鼠标悬停在导航链接按钮上时，您会看到（作为示例）：

localhost:49690/index.cshtml#/NLIincontext

单击其中一个导航按钮时，地址栏将更改为：

http://localhost:49690/index.cshtml#/NLIincontext

然而，页面上没有看到其他可见的变化。如果单击地址栏中链接的末尾并单击“输入”，页面会将相应视图加载到shell.html中使用的div中，以显示路由器的活动项目。

此外，如果刷新页面，地址栏中的地址不会更改，但刷新后页面将显示与地址栏中的地址关联的数据。

控制台日志窗口中没有显示任何活动，即使system.debug（true）包含在我的main.js文件中，单击按钮时也不显示网络活动，也不管按钮多少次点击。

我已尝试使用各种方案将数据绑定到shell.html中的div，例如：

<div data-bind="compose: { view: 'nav' }"></div>

我甚至通过从nav.js返回路由器并在shell.html中使用这种类型的绑定将nav.html元素绑定到viewmodel（nav.js）：

<div data-bind="compose: { model: 'nav' }></div>

我也尝试过：

<div>
    <!-- ko compose: 'viewmodels/nav' -->
    <!-- /ko -->
</div>

以及其他变体，例如视图：'nav'，在适当的地方等等。

我甚至尝试使用与路由器相同的路由创建子路由器并返回子路由器，并将nav.html绑定到子路由器，但仍然没有导航活动。

上述的不同配置将正确显示nav.html及其导航按钮，但在没有配置的情况下，网页会通过检索链接到该按钮的视图进行响应。

我是durandaljs的新手，我知道John Papa的视频是基于早期版本的durandaljs而不是我目前正在使用的（他的模型使用sammy.js作为路由器），但我无法获得此路由上班。

我确实找到了其他人遇到类似问题的地方（在Google Groups durandaljs中），他在路由器的activate（）方法中使用两行代码解决了他的问题（他的解决方案说，“问题是jQuery Mobile的导航框架干扰Durandal路由器。将以下行添加到my shell.js文件中的activate方法解决了问题“）：

$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;

他似乎正在做着我正在尝试做的事情，但不幸的是，当我尝试将这些行包含在我的shell.js文件中时，我得到了'''''''''''''''''''''''''''''''''虽然我能够通过shell.js文件的define签名将jQuery导入为$：

activate: function () {
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    router.map(config.routesNLI).buildNavigationModel();
    return router.activate(my.viewToDisplay());
}

非常感谢任何建议或意见！在此先感谢您的帮助。

RESOLUION

我似乎有一些导航的随机问题，但是使用Krzysztof Cieslak提供的建议，我在第三个div中更改了路由器的绑定：

<!-- ko router: { transition:'entrance' } -->
<!-- /ko -->

然后我摆脱了对jquery.mobile的引用，现在我可以导航到各种页面。不幸的是，复制到地址栏中的文本并不总是一致的;当URL被复制为＃/ login时，视图/视图模型的重新加载似乎总是有效，从而产生如下内容：

http://localhost:12345/index.cshtml#/login

在其他时候，地址栏缺少'＃/'，导航失败。

看来我犯了使用sammy.js路由器而不是durandaljs路由器编写的代码。我要感谢所有回复的人，并希望有一天能够得到回报。

Answer 1

Shell.html绑定

我有点困惑，因为你只向我们展示了对nav.html视图的静态绑定，而不是你说在导航之前一切都正确呈现。据我所知，你的shell.html应该是这样的：

<div>
    <header>
        <!--ko  compose: {view: 'nav'} --><!--/ko-->
    </header>
        <div>
            <section id="content" class="main">
                <!--ko router: { transition:'entrance'}--><!--/ko-->
            </section>
        </div>
</div>

第一个绑定是静态nav.html绑定，第二个绑定是基于路由器的动态视图绑定。

Durandal＆amp; jQuery Mobile

正如您所写，jQuery Mobile和Durandal路由器之间存在干扰问题。解决它的简单方法是编辑文件jqm-config.js中的全局jQuery Mobile设置（它位于jQuery Mobile目录中），所以它看起来像：

$(document).bind("mobileinit", function() {
        console.log("### Config loaded...");
        $.mobile.ajaxEnabled = false;
        $.mobile.linkBindingEnabled = false;
        $.mobile.hashListeningEnabled = false;
        $.mobile.pushStateEnabled = false;

        $.mobile.buttonMarkup.hoverDelay = 100;

        $.mobile.autoInitializePage = false;
});

Durandal中的导航问题

RESOLUION

1 个答案: