Router callback triggered twice?

[EC]

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.

[Petyo]

Hi,

The kendo router was never engineered to support multiple active instances. Can you please share what kind of requirements do you target with such approach?   

Kind regards,
Petyo
the Telerik team

[EC]

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.

[Petyo]

Hello,

Thank you for the detailed information - it makes sense. I will log this as a bug in our issue tracker, we should address it within the internal builds/service pack releases for Q1 2013. 

Kind regards,
Petyo
the Telerik team

[EC]

Much appreciated!

Best regards,
Wannes.

[Gary]

I have encountered a similar situation and would like the ability to work with multiple routers. Is there  a way to know if and when this becomes available in an internal build?

Thanks,
Gary

[Petyo]

Hello Gary,

We are about to release our SP1 update this week, the fix will be available in it. 

Greetings,
Petyo
the Telerik team

[Taras]

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.

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

<script>

    var router = new kendo.Router({hashBang: true});
    router.route("*suffix", function (suffix, e) {
        console.log(suffix);
        try {
            var item = $("#tabstrip").tabGroup.find(':contains("' + suffix + '")');
            $("#tabstrip").select(item);
        } catch (ex) {
            console.log(ex);
        };

    });

 

 $(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

[Petyo]

Hi,

the assistance you require is not related to this thread. Please open separate support tickets/forum threads per each problem you have (make sure that you include runnable samples, too). We will help you accordingly. 

Regards,
Petyo
Telerik