Как «слушать маршрутизатор» (реагировать на события Router в Views/Models) в Backbone.js?

Question

В документации Backbone.js, в the entry for the Router.routes method, говорится

Когда посетитель нажимает на кнопку назад, или вводит URL, и конкретный маршрут согласован, название акции будет уволен как событие, так что другие объекты могут прослушивать маршрутизатор, и получать уведомление.

Я попытался осуществить это в этом относительно простом примере:

Соответствующим 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, похоже, не подхватывается (все работает - я успешно вызываю «showThi» ng ", определенный в маршрутизаторе).

Я считаю, что у меня должно быть какое-то заблуждение относительно того, что документация предназначена для этого заявления. Поэтому в ответ я хотел бы: мне бы хотелось, чтобы кто-то пересмотрел мой код, чтобы он работал через событие Router, которое получало View, или, понятно, объясните, что я указал в документации по маршрутизатору выше, намеревается сделать это, в идеале, с альтернативным образцом кода (или с использованием моего, измененного).

Большое спасибо за любую помощь, которую вы можете предоставить!

Answer 1

Это факт, что вы связываете слушателя с неправильным объектом. Попробуйте это в вашем Вид:

window.ThingView = Backbone.View.extend({ 

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

...