javascript - Backbone.js 中的一个 "listen to the router"(响应 View /模型中的路由器事件)如何？

Question

在 Backbone.js 文档中，在 the entry for the Router.routes method 中, 据称

When the visitor presses the back button, or enters a URL, and a particular route is matched, the name of the action will be fired as an event, so that other objects can listen to the router, and be notified.

我试图在这个相对简单的示例中实现这一点:

相关JS:

$(document).ready(function(){
    // Thing model
    window.Thing = Backbone.Model.extend({
        defaults: {
            text: 'THIS IS A THING'
        }
    });

    // An individual Thing's View
    window.ThingView = Backbone.View.extend({
        el: '#thing',

        initialize: function() {
            this.on('route:showThing', this.anything);
        },

        anything: function() {
            console.log("THIS DOESN'T WORK! WHY?");
        },

        render: function() {
            $(this.el).html(_.template($('#thing-template').html(), {
              text: this.model.get('text')
            }));
            return this;
        }
    });

    // The Router for our App
    window.ThingRouter = Backbone.Router.extend({
        routes: {
            "thing":      "showThing"
        },

        showThing: function() {
            console.log('THIS WORKS!');
        }
    });

    // Modified from the code here (from Tim Branyen's boilerplate)
    // http://stackoverflow.com/questions/9328513/backbone-js-and-pushstate                                                             
    window.initializeRouter = function (router, root) {
        Backbone.history.start({ pushState: true, root: root }); 
        $(document).on('click', 'a:not([data-bypass])', function (evt) {

            var href = $(this).attr('href');
            var protocol = this.protocol + '//'; 

            if (href.slice(protocol.length) !== protocol) {
                evt.preventDefault();
                router.navigate(href, true);
            }
        });
        return router;   
    }

    var myThingView = new ThingView({ model: new Thing() });
    myThingView.render();
    var myRouter = window.initializeRouter(new ThingRouter(), '/my/path/');
});

相关的 HTML:

  <div id="thing"></div>

  <!-- Thing Template -->
  <script type="text/template" id="thing-template">
    <a class='task' href="thing"><%= text %></a>
  </script>

但是，View 的初始化函数中引用的路由器事件似乎没有被拾取(其他一切正常——我成功调用了路由器中定义的“showThing”方法)。

我相信我一定对这份声明的文档意图有一些误解。因此，我在回复中寻找的是:我希望有人修改我的代码，以便它通过 View 获取的 Router 事件 工作，或者清楚地解释什么我上面列出的 Router 文档打算我们这样做，最好使用替代代码示例(或使用我的代码示例，修改)。

非常感谢您提供的任何帮助!

Answer 1

这是因为您将监听器绑定(bind)到错误的对象。在您的 View 中试试这个:

window.ThingView = Backbone.View.extend({

    initialize: function() {
            myRouter.on('route:showThing', this.anything);
    },

...