javascript - backbone.js 中的多个主题标签路由

Question

我有一个需要大量用户输入的项目。它基本上是一个有六 block 拼图的拼图，这些拼图是由主题标签路线触发的。很容易，对吧？我猜。

我现在有一个很好的设置，当达到哈希值(“www.website.com/index.html/#test”)时，第一部分就会出现。现在，这一切都很棒，但问题是，这些片段可以随时以任何顺序触发。因此，如果我有以下路线 - “1”、“2”、“3”等，它需要能够类似于: (“www.website.com/index.html/#3/#1/#2") 或类似的东西。在我首先弄清楚如何让它发挥作用之后，我可以担心稍后让它看起来怎么样。

这是我当前拥有的路线代码 -

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

所以我的问题是；如何才能在backbone.js 中拥有多个主题标签路由？

提前致谢。

-米切尔

Answer 1

你可以做这样的事情。您浏览到 stuff.com/path#hide/one/Three 的位置这里带有 (/:x) 的路由是动态匹配器。因此 () 表示它是可选的，而 :x 表示它将把 url 片段的该部分的字符串值作为参数传递给路由匹配时调用的函数。因此，如果您的图像数量限制在相当小的范围内，我认为这应该没问题。

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