Router callback triggered twice? in Kendo UI for jQuery

This is a migrated thread and some comments may be shown as answers.

Router callback triggered twice?

8 Answers 44 Views

SPA

This is a migrated thread and some comments may be shown as answers.

EC asked on 03 May 2013, 09:08 AM

Hello everyone,
When using the Router, I have been experiencing a weird effect involving 2 routers and deep linking.

I've isolated the problem down to this test:

var router1 = new kendo.Router();

router1.route("/test1/", function (){

alert("test1");

});

var router2 = new kendo.Router();

router2.route("/test2/", function (){

alert("test2");

});

router1.start();

router2.start();

The routing works fine when you start from /, then navigate to /#/test1/ But when using a deep link (e.g.: open a new tab and navigate directly to /#/test1/), then the callback is triggered twice; 2 times "test1" is shown in an alert.
This is not the case when navigating directly to /#/test2/

Just for fun, I added a third router, which caused 3 alerts of test1, and 2 alerts of test2... It looks like the initialization of one router triggers an additional change event in the previous routers.

Best regards,
Wannes.

8 Answers, 1 is accepted

answered on 07 May 2013, 07:53 AM

The approach in our case, is an HTML 5 bundle that is provided to other developers. It contains jQuery and Kendo UI as the base development tools.

The default behaviour for navigation would be managed by a global Kendo UI router (that they may use freely). But they may also define their own router that uses a completely different pattern to navigate. The problem is that we cannot force them to use the global one. Though I agree, there should only be one of them at a time to prevent unexpected results.

Another case could be a packaged, reusable screen or UI component that needs its own router. Why shouldn't it be allowed to have 2 routers that are mapped to different URLs?
It works fine by the way, by loading the SPA without hash; navigation is only triggering the callback once. But people may bookmark a screen, or get a link in an email to a specific state of the SPA.

Best regards,
Wannes.

Accepted

answered on 01 Jun 2015, 06:51 PM

Hi. I've faced similar problem. router.route fired twice. First time in StackTrace 'OnSelect' method, which is desired, but second time there is o.extend._urlChanged.

How to prevent router.route double firing ?
How to properly select tab via API?

<script>

$(function () {

$('body').addClass('manageDashboards');

$('.k-tabstrip-wrapper').addClass('tabsDashboards');

router.start();

viewModel = dashboardViewModel(@Html.Raw(Json.Encode(Model)));

kendo.bind($("#dashboards"), viewModel);

});

function onSelect(e) {

kendo.ui.progress($("#tabstrip"), true);

viewModel.set("SelectedTab", $(e.item).index());

router.navigate($(e.item).text());

}

</script>

@(Html.Kendo().TabStrip()

.Name("tabstrip")

.Navigatable(false)

.Events(e => e.Select("onSelect").Activate("onActivated"))

.Items(tabstrip =>

{

foreach (var dashboard in Model)

{

tabstrip.Add().Text(dashboard.Name)

.Selected(dashboard.Type == DashboardType.Global)

.Content(@<text>

@Html.EditorFor(model => dashboard)

</text>);

}

}))

Video: http://screencast.com/t/wI4iQITaUxGn