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

Router callback triggered twice?

8 Answers 65 Views
SPA
This is a migrated thread and some comments may be shown as answers.
EC
Top achievements
Rank 1
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

Sort by
0
Petyo
Telerik team
answered on 07 May 2013, 03:45 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
EC
Top achievements
Rank 1
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.
0
Accepted
Petyo
Telerik team
answered on 07 May 2013, 11:07 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
EC
Top achievements
Rank 1
answered on 07 May 2013, 01:03 PM
Much appreciated!

Best regards,
Wannes.
0
Gary
Top achievements
Rank 2
answered on 10 May 2013, 05:58 PM
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
0
Petyo
Telerik team
answered on 13 May 2013, 08:56 AM
Hello Gary,

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

Greetings,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Taras
Top achievements
Rank 2
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.

  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

0
Petyo
Telerik team
answered on 03 Jun 2015, 12:09 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
SPA
Asked by
EC
Top achievements
Rank 1
Answers by
Petyo
Telerik team
EC
Top achievements
Rank 1
Gary
Top achievements
Rank 2
Taras
Top achievements
Rank 2
Share this question
or