多个路由在backbone.js 中无法正常工作答案

【问题标题】：Multiple routes not working correctly in backbone.js多个路由在backbone.js 中无法正常工作
【发布时间】：2014-10-08 09:39:52
【问题描述】：

我正在尝试创建一个基本的 web 应用程序，在到达特定 URL 时显示图像。在这种情况下，我使用的是backbone.js 的哈希系统。

我正在努力做到这一点，以便在到达“www.website.com/index.html#1”时，使用我拥有的一些 JavaScript 显示第一张图片。我还需要它，以便在到达“www.website.com/index.html#1/#3/#5”时显示第一、第三和第五张图像。我知道我必须使用多条路线才能做到这一点，但我不确定如何。

对于第一张效果非常好的图片，我有一条工作路线。我只是不知道如何调整它以使其适用于多条路线。

这是工作哈希 -

<script>
    $(function(){

    var hideOne = function () {
        //alert("hideOne");
        var elem = document.getElementById("one");
        elem.className = "hide";
    };

    var Workspace = Backbone.Router.extend({
      routes: {
        "test":"test",// #test
      },    
      test: hideOne
    });

    var router = new Workspace();
    Backbone.history.start(); 

});
</script>

太棒了，它可以工作，甚至不会刷新页面。但是当我尝试添加另一条路线时，一切都失败了。比如，如果我在"test":"test" 下添加"test1":"test1"，原来的"test":"test" 将不再起作用（当然，新的也不起作用）。

我什至尝试复制+粘贴整个代码块并尝试制作一个全新的路由代码块。那也行不通。我真的很难过。

任何建议都会很棒。

谢谢

【问题讨论】：

标签： javascript html backbone.js hash routes

【解决方案1】：

您应该限制第一个用例的范围。现在不要依赖外部函数。做类似的事情

routes: {
        "test":function(){
            alert("test");
        },
        "test2":function(){
            alert("test2");
        }            
      },

然后改成

routes:  {
            "test":"test",
            "test2":"test2"
         },
         {
            test: function(){
              alert("test");
            },

            test2: function(){
              alert("test2");
            }
         }

一旦你完成了这项工作，然后开始处理 DOM 操作。

【讨论】：

你是对的。我现在肯定会这样做，哈哈。简单得多。不过我确实有一个问题。当我使用此代码时，我在控制台中收到错误 - “Uncaught SyntaxError: Unexpected token :”。我不确定是什么原因造成的。不过感谢您的回复！
哈哈，我知道了。我实际上很尴尬地说我找不到错误。我知道它就在那里，但它正在逃离我。这与“：”有关，但我不能指望它。

【解决方案2】：

routes: {
  "?*:queryString": 'showImages'
},

showImages: function(queryString) {
  console.log(queryString); // #1#3#5
}

您可以使用路由 "?*:queryString" 来匹配这个 URL “www.website.com/index.html#?#1#3#5”。将调用函数“showImages”并在 queryString 参数中传递值 #1#3#5。

【讨论】：

【解决方案3】：

因此，从 StackOverflow 上发布的其他问题以及我自己发布的一些问题来看，一些优秀的用户帮助了我，我已经解决了。

这是我必须使用的代码 -

<script>
  $(function(){
    var hideMany = function () {
      var toHide = [].slice.call(arguments);
      toHide.forEach(function (id) {
        if(id === null) { return }
        var elem = document.getElementById(id);
        if(elem) {
          elem.className = "hide";
        }
      });
    };

    var Workspace = Backbone.Router.extend({
      routes: {
        "hide(/:a)(/:b)(/:c)" : "test"
      },
      test: hideMany
    });

    var router = new Workspace();
    Backbone.history.start();

  });
</script>

因此，当您键入“www.website.com/index.html#hide/ID1/ID2/ID3”时，它将隐藏具有您键入的 ID 的元素。

我不完全理解它，但我正在努力分解它并弄清楚它是如何工作的。谢谢大家的帮助！

【讨论】：