如何使用{can.route}监听空白路由并做出反应?

时间:2013-10-22 23:29:25

标签: javascript url-routing canjs canjs-routing

我想用CanJS设置路由,以便根据我点击的url,设置一些相应的控件。我的问题是试图找到一种方法来表达在控件中监听的默认路由:“如果没有匹配,则执行此操作”。有关这方面的任何提示吗?

到目前为止,这是我的代码。似乎适用于/#!/plant/1/day/3/#!/plant/1等网址,但不适用于/#!/

can.route('plant/:plant_id/day/:day', {});
can.route('plant/:plant_id', {});
can.route('', {});

var Router = can.Control({}, {
  init : function () {},

  "{can.route}" : function (route, event, newVal, oldVal) {
    console.log('Init default control');
  },

  "{can.route} plant_id" : function (route, event, newVal, oldVal) {
    console.log('Init plant control');
  },

  "{can.route} day" : function (route, event, newVal, oldVal) {
    console.log('Init day control');
  }
});

P.S。我实际上设法使用Can.Control.route插件执行此操作:

"route" : function (route, event, newVal, oldVal) {
    console.log('route Default route', arguments);
}

但路由插件似乎都设置路由并对它们作出反应,我想知道如何在没有特定插件的情况下执行此操作。

3 个答案:

答案 0 :(得分:2)

您的解决方案有效,但您也可以使用can.Control.route插件,它允许您直接在控制器操作中定义和侦听路由:

var Router = can.Control({
    init : function(el, options) {
    },

    "/:plantId route" : function(data) {
        // the route says /id
        // data.id is the id or default value
    },

    route : function(data){
        // the route is empty
    }
});
new Router(window);

答案 1 :(得分:0)

结束了类似跟随的事情,但感觉不太理想......

    "{can.route} change" : function (ev, attr, how, newVal, oldVal) {
        if(newVal=== 'add' && (!ev.attr('plant_id') && !ev.attr('day')))
        console.log('{can.route} Default route', arguments);
    },

答案 2 :(得分:0)

我注意到默认的'/'路线存在同样的问题。我潜入pushstate.js,发现它与默认路由无法正常工作。您可以在此处查看更多详细信息:https://forum.javascriptmvc.com/#Topic/32525000001460049

我没有测试任何没有pushstate.js的东西(使用#!),所以这只适用于使用pushstate。