CODEWITHSUNDEEP
durandaldurandal-2.0durandal-navigation
bigerock
bigerock

Reputation: 713

durandaljs - navigate to view on button click

maybe i missed the point of navigating in durandal, but if i want to trigger a view on a button click, how is this done?

i'm databinding a button to a click function in the viewmodel. however, when the viewmodel gets loaded, it immediately triggers the view redirect.

view:

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

viewmodel:

gotoPage: function(page){

    router.navigate(page);
}

Upvotes: 2

Views: 2858

Answers (3)

philu
philu

Reputation: 874

Your javascript in the data-bind attribute, "click: gotoPage('mypage')", gets evaluated at binding time, i.e. "gotoPage('mypage')" gets executed at binding time, and the result is bound to the click event.

So you need to bind to a property, where that property points to the desired function.

In other words do this in your view:

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

and do something like this in your viewmodel:

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
    };
);

Part B

Your GoToPage routine CAN take a parameter, e.g.

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

View:

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

(where listOfPages contains a list of page objects, and each page object has a mypage element).

More info here: Knockout documentation on foreach

Upvotes: 1

Barry
Barry

Reputation: 28

I believe that all you are missing is the hash character in front of your route. I tried to just add a comment to Frank's answer, but don't have enough reputation as yet :(

Upvotes: 0

Frank
Frank

Reputation: 2198

Can you post your whole viewmodel? maybe there is something in your activate function that is causing the redirect. Here is an example that should work:

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
    };
);

The code in the activate function will run when your model is loaded. If you have any redirect code in there that might be your problem. If you want to bypass the function all together you could also change your button to a anchor and just make the href point to your route like this:

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

Upvotes: 2

Related Questions