durandal - durandaljs - 导航到按钮点击查看

Question

也许我错过了在 durandal 中导航的要点，但是如果我想在单击按钮时触发视图，这是如何完成的？

我正在将按钮数据绑定到视图模型中的单击功能。但是，当视图模型被加载时，它会立即触发视图重定向。

看法：

<button data-bind="click: gotoPage('mypage')">go somewhere</button>

视图模型：

gotoPage: function(page){

    router.navigate(page);
}

Answer 1

你能发布你的整个视图模型吗？也许您的激活函数中有某些东西导致了重定向。这是一个应该有效的示例：

define(['durandal/app',
    'knockout',
    'plugins/router'],
function (app, ko, router) {
    var vm = {
        CurrentEntity: ko.observable(),
        GoToPage: GoToPage
        activate: activate
    };
    return vm;

    function GoToPage(page) {
        router.navigate(page);
    };

    function activate() {
        // activation code here, make sure no redirect code exists here
    };
);

加载模型时，激活函数中的代码将运行。如果您有任何重定向代码，那可能是您的问题。如果您想一起绕过该功能，您还可以将按钮更改为锚点，然后将 href 指向您的路线，如下所示：

<a href="#/MyDurandalRoute" >go somewhere</a>

Answer 2

您在 data-bind 属性中的 javascript，“click:gotoPage('mypage')”，在绑定时被评估，即“gotoPage('mypage')”在绑定时被执行，结果被绑定到点击事件.

因此，您需要绑定到一个属性，该属性指向所需的功能。

换句话说，在您看来这样做：

<button data-bind="click: gotoMyPage">go somewhere</button>

并在您的视图模型中执行以下操作：

define([
    'durandal/app',
    'knockout',
    'plugins/router'],
function (app, ko, router) {
    var vm = {
        CurrentEntity: ko.observable(),
        gotoMyPage: GoToPage
        activate: activate
    };
    return vm;

    function GoToPage() {
        router.navigate('#mypage');
    };

    function activate() {
        // activation code here, make sure no redirect code exists here
    };
);

B部分

您的 GoToPage 例程可以带一个参数，例如

    function GoToPage(page) {
        router.navigate(page.mypage);
    };

看法：

<table>
    <tbody data-bind="foreach: listOfPages">
        <tr>
            <td data-bind="text: mypage, click: gotoMyPage"></td>
        </tr>
    </tbody>
</table>

（其中 listOfPages 包含页面对象列表，每个页面对象都有一个 mypage 元素）。

更多信息：foreach 上的淘汰赛文档

Answer 3

我相信您所缺少的只是路线前面的哈希字符。我试图对弗兰克的回答添加评论，但还没有足够的声誉:(