<a click=''> event binding in SPA using router.navigate

Question

I have small requirement that i want to navigate to productdetail module from products grid.

Products Grid contains the below

Product Id   | Product Name

123977844 | HTC OneX

var router = require('plugins/router');
    router.navigate('welcome')

i want to navigate to other module(productdetails) when i click Product Id link using SPA, durandal, require js and knockout js. Can any one help on...

Regards, Shiva

Answer 1

You have two options.

Add the route in the HTML as a normal link:

<a data-bind="attr:{href: '/#product/' + ProductId}, text: ProductName"></a>

(Replace ProductId and ProcuctName with your properties)

Add a click handler:

Assuming the HTML is inside a foreach while iterating through a products array.

 <a href="#" data-bind="text: ProductName, click: $parent.goToProduct"></a>

ViewModel:

var router = require('plugins/router');

var vm = {
    goToProduct: function(product){
        router.navigate('product/' + product.ProductId);
    }