Question

我正在尝试创建一个基本的webapp，在达到特定的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>

很棒，它很有效，它甚至不刷新页面。但是当我尝试添加另一条路线时，一切都失败了。就像，如果我在"test1":"test1"下添加"test":"test"，则原来的"test":"test"将不再有效（当然，新的{{1}}也不会有用。）

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

任何建议都很棒。

由于

Answer 1

您应该限制第一个用例的范围。暂时不要依赖外部功能。做点什么

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

然后改为

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

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

了解详情：http://mrbool.com/backbone-js-router/28001#ixzz3ANyS0hkR

一旦你有了这个工作，然后就开始研究DOM操作了。

Answer 2

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

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

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

Answer 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的元素。

我不完全理解它，但我正在努力将其分解并弄清楚它是如何工作的。谢谢你的帮助，伙计们！

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

3 个答案: