Question

我有一个问题，我无法找到答案。

我使用Hot Towel模板设置了一个项目。一切都在工作，除了一条特定的线。它没有将属性绑定到锚标记。这是一行：

<a class="nav-button" data-bind="attr: {'data-target': router.navigationModel()[1].hash, href: router.navigationModel()[1].hash }">

这似乎不起作用。这是一个名为nav的视图，我通过它在shell.html中的视图模型调用，如下所示：

 <div data-bind="compose: 'viewmodels\\nav'">
 </div>

我想让我感到困惑的部分是，当我在下面调用它时，它正在工作：

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

我还确认，在调用viewmodel时，这样的东西会绑定属性：

<a class="nav-button" data-bind="attr: {'data-target': 'blah', href: 'blah'}">

当我使用路由器而不是'blah'时，它不起作用。当我调用viewmodel而不是视图时，有什么不同我必须要做的。

供参考，这是我的路线设置。它现在非常简单。

var routes = [
            { route: '', moduleId: 'home', title: 'Home', nav: 1 },
            { route: 'inbox', moduleId: 'SubNavigation/inbox', title: 'Inbox', nav: 2 }];

谢谢！

更新

在做了一些研究之后，我觉得我可能在使用错误的路由器。所以我想写出我正在做的事情：

这是我的shell.js

define(['durandal/system', 'plugins/router', 'services/logger'],
function (system, router, logger) {
    var shell = {
        activate: activate,
        router: router
    };

    return shell;

    //#region Internal Methods
    function activate() {
        return boot();
    }

    function compositionComplete(view, parent) {
        $(".nav-button").on("click", function (event) {
            showSubNav(this);
            event.preventDefault();

        });
    }

    function boot() {
        //log('Hot Towel SPA Loaded!', null, true);

        router.on('router:route:not-found', function (fragment) {
            logError('No Route Found', fragment, true);
        });


        var routes = [
            { route: '', moduleId: 'home', title: 'Home', nav: 1 },
            { route: 'inbox', moduleId: 'SubNavigation/inbox', title: 'Inbox', nav: 2 }];


        return router.makeRelative({ moduleId: 'viewmodels' }) // router will look here for viewmodels by convention
            .map(routes)            // Map the routes
            .buildNavigationModel() // Finds all nav routes and readies them
            .activate();            // Activate the router



    }

    function log(msg, data, showToast) {
        logger.log(msg, data, system.getModuleId(shell), showToast);
    }

    function logError(msg, data, showToast) {
        logger.logError(msg, data, system.getModuleId(shell), showToast);
    }
    //#endregion
});

这是我的nav.js

define(['services/logger'], function (logger) {
var title = 'Nav';
var vm = {
    activate: activate,
    compositionComplete: compositionComplete
};

return vm;

//#region Internal Methods
function activate() {
    logger.log(title + ' View Activated', null, title, true);
    return true;
}

function compositionComplete() {
    $(".nav-button").on("click", function (event) {
        showSubNav(this);
        event.preventDefault();

    });
}



function showSubNav(link) {

    var target = $(link).data("target");

    $(".navigation-sub").removeClass("current");
    $(".active").removeClass();

    var isactive = $("body").find(".current");

    if (isactive.length == 0) {
        $("body").addClass("subnav-active");
    }

    $(target).addClass("current");
    $(link).addClass("active");


};
//#endregion
});

我认为我需要在nav.js中使用shell.js中的路由器，但我不确定是什么。

Answer 1

我通过将我在shell viewmodel中的路由器代码移动到nav viewmodel来实现此功能。这现在正在完成我想做的事情。基本上我基本上更熟悉我认为的框架。我认为我必须在shell视图中设置我的路线。谢谢！

数据绑定不绑定我的哈希值

1 个答案: