Cannot binding click in shell.html and shell.js durandal

Question

This's my source code:

main.js :

requirejs.config({
    paths: {
        'text': '../Scripts/text',
        'transitions': '../Scripts/durandal/transitions',
        'durandal': '../Scripts/durandal',
        'plugins': '../Scripts/durandal/plugins',
        'knockout': '../Scripts/knockout-2.3.0',
        'jquery': '../Scripts/jquery-1.10.2.min',
        'nivoLightbox': '../Scripts/nivo-lightbox/nivo-lightbox'
    },
    shim: {
        'bootstrap': {
            deps: ['jquery'],
            exports: 'jQuery'
        }
    }
});

define(['durandal/system', 'durandal/app', 'durandal/viewLocator'], function (system, app, viewLocator) {
    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");
    app.title = 'Cu?i di ku';
    //specify which plugins to install and their configuration
    app.configurePlugins({
        router: true,
        dialog: true,
        widget: {
            kinds: ['expander']
        }
    });
    app.start().then(function () {
        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();
        //Show the app by setting the root view model for our application.
        app.setRoot('shell', 'entrance');
    });
});

In my shell.html , I have menu:

<div id="top_nav" class="ddsmoothmenu">
    <ul>
        <li data-bind="click: goHome()"><a class="selected"></a></li>
    </ul>
    <br style="clear: left" />
</div>

shell.js :

define(['plugins/router', 'durandal/app'], function (router, app) {
    return {
        router: router,
        activate: function () {
            router.map([
                { route: ['', 'home'], title: 'Mới nhất', moduleId: 'viewmodels/stories', nav: true },
                { route: ':storyId/:story', title: ':storyId', moduleId: 'viewmodels/story', nav: true }
            ]).buildNavigationModel();

            return router.activate();
        },
        goHome: function () {
            router.navigate('');
        }
    };
});

When page in first time loading, it run to goHome() function (I don't know why?). When I click in menu, It doesn't execute this function? Please help me to fix this.

Answer 1

Try replacing:

<li data-bind="click: goHome()"><a class="selected"></a></li>

with: (no () after goHome)

<li data-bind="click: goHome"><a class="selected"></a></li>

The () calls the goHome function when the bindings are applied for the first time.

If this still doesn't fix the problem, do you get any errors in the console when the page is loaded or when you click the li?