Question

首先，这是我试图用来声明路线的我的一小段代码 -

<script>
    var Workspace = Backbone.Router.extend({

  routes: {
    "test":                 "test",    // #test
  },

  test: hideone() {
    ...
  },

});
</script>

我正在尝试这样做，以便当有人到达“www.website.com/index.html#test”时，它会触发JavaScript函数“hideone”，我在文档的前面已经写过了。

如果有帮助，这里是“hideone” -

<script>

function hideone() {
        var elem = document.getElementById("one");
        elem.className = "hide";
}                       
</script>

我之前从未使用过backbone.js，而且我在这里找不到特定问题的文档。

Answer 1

您需要创建路由器的实例，并且还需要致电Backbone.history.start。来自Backbone documentation：

创建所有路由器后，所有路由都是设置正确，调用Backbone.history.start（）开始监控 hashchange事件和调度路由。

所以你需要在脚本的末尾添加这两行：

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

您还需要考虑@ w1zeman1p关于定义测试函数的内容。对Backbone.Router.extend的调用接收一个对象，其中一个属性名为test，其值必须是函数。您可以将其内联定义或为其指定hideOne函数：

//opt1 - assign an existing function
test: hideOne 

//opt2 - inline
test: function(){
    //function code
}

我用第一种方法创建了this fiddle。

修改

确保按照以下顺序包含脚本，无论是在头上还是在关闭主体之前（作为参考，您可以通过右键单击“结果”窗格并选择“检查”在小提琴上进行检查）：

<head>  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>  </head>

然后，您可以在结束<script>之前或结束</head>之前将您的JS包含在另一个</body>标记中。（请注意，您不需要从上面的URL加载库，我只是想澄清库的顺序）

Answer 2

routes对象中“test”的左侧值是值为函数的属性。试试这个：

<script>
    var Workspace = Backbone.Router.extend({
      routes: {
        "test": "test",
      },

      test: function() {
         var elem = document.getElementById("one");
         elem.className = "hide";
      }
    });
</script>

如何使用backbone.js路由来触发JavaScript函数

2 个答案: