骨干路由器实例化

Question

我是骨干的新手我坚持实例化路由器对象，我的项目架构有以下文件路由器javascript用于路由器定义和查看javascript用于视图定义，我想实例化一个路由器对象里面的点击功能观点课，如果这是一件简单的事，请原谅我，不胜感激任何帮助。

//Router java script file
EC.Router = (function() {
  'use strict';

  var
    viewHash = {},
    EvtCalRouter, startRouter;

    // Set up the Backbone Router.
  // Evaluates URL with parameters and maps them to functions contained within the Router.
  // This enables us to do things like allow users to bookmark search results.
  // See "http://backbonejs.org/#Router" for more info.
  EvtCalRouter = Backbone.Router.extend({

    // Define the Routes we care about.
    // See "http://backbonejs.org/#Router-routes" for more info.
    routes : {
      ""       : "home",             // User navigated to: "/adtglobal/eventcalendar/"
      "search" : "searchEvents",     // User navigated to: "/adtglobal/eventcalendar/#search"
      "create" : "createEvent",      // User navigated to: "/adtglobal/eventcalendar/#create"
      "view"   : "viewEventDetails", // User navigated to: "/adtglobal/eventcalendar/#view"
      "edit"   : "editEvent"         // User navigated to: "/adtglobal/eventcalendar/#edit"
    },

    // Instantiate the Views required to display the Event Calendar Search screen.
    buildSearchScreen : function() {

      // Application Title
      viewHash['appTitle'] = ESPN.apps.ADTG.EC.TitleView.newInstance({
        el : document.getElementById('ecSearchPageHeadWrap')
      });

      // Event Search Toolbar
      viewHash['searchTitle'] = ESPN.apps.ADTG.EC.SearchScreenTitleView.newInstance({
        el : document.getElementById('ecSearchTitle')
      });

      viewHash['addEventBtn'] = ESPN.apps.ADTG.EC.CreateBtnView.newInstance({
        el : document.getElementById('ecAddEventBtn')
      });

},

    // Executes when the user navigates to "/adtglobal/eventcalendar/#search"
    // In all likelihood, the user had bookmarked a particular search result and is coming back to view the results again.
    // Check for search parameters.  If there aren't any, just display the Search View as normal.
    // Otherwise, query the API with the supplied search parameters and display the results.
    searchEvents : function() {
        alert('Inside Search Events');
      },

    // Executes when the user navigates to "/adtglobal/eventcalendar/#create"
    // There probably won't ever be parameters to worry about for 'create'.
    // Show the Create View.  Which may just be the the Details View of the Sporting Event in a Create Mode.
    createEvent : function() {},

    // Executes when the user navigates to "/adtglobal/eventcalendar/#view"
    // If View Parameters are missing, display an error message.
    // Otherwise display the details of the Sporting Event as specified by the parameters.
    viewEventDetails : function() {},

    // Executes when the user navigates to "/adtglobal/eventcalendar/#edit"
    // If Edit Parameters are missing, display an error message.
    // Otherwise display the View Details View of the Sporting Event in Edit Mode, as specified by the parameters.
    editEvent : function() {},

    // Executes when the user navigates to "/adtglobal/eventcalendar/"
    // Display the Home View, which in this case is the Search View.
    home : function() {
     this.buildSearchScreen();
    }

  });

  /**
   * Kicks off Backbone's router functionality.
   */
  startRouter = function() {
    new EvtCalRouter();
    Backbone.history.start();
     };

    // Start routing functionality
  $(document).ready(startRouter);

  // For any module that needs to know...
  $(document).ready( function() {
    $(document).trigger( ESPN.apps.ADTG.EC.events.ecInit );
  });

  //-------------------------------------------------------------------------------------------------------------------
  // Public API
  //-------------------------------------------------------------------------------------------------------------------

  return {
    getView : function( name ) { return viewHash[name] || {}; },

   };

})();

我有一个用于搜索的view.js，点击搜索按钮我应该做router.navigate但是如何创建一个对象上面的路由器并调用该函数。视图文件如下，

EC.SubmitBtnView = (function() {
  'use strict';

  var BtnView, applyStyles;

  /**
   * Apply CSS to this view's HTML element.
   * @param {Object} $elmt
   */
  applyStyles = function( $elmt ) {
    $elmt.css({
      "text-align" : "center",
      "margin-top" : "5px"
    });
  };

  // Create the View
  // See 'http://backbonejs.org/#View-constructor' for more info
  BtnView = Backbone.View.extend({

    events : {
      "click button" : "btnClick"
    },

    initialize : function() {
      this.render();
    },

    render : function() {
      this.$el.html( _.template( $('#submitBtnTemplate').html() ) );
      this.$('button').text( ESPN.getI18nText('ESPN.apps.ADTG.EC.SearchSubmitBtnView.label') );
      applyStyles( this.$('div') );
    },

     btnClick : function() {
       window.alert('Search!');
     }
  });

  //-------------------------------------------------------------------------------------------------------------------
  // Public API
  //-------------------------------------------------------------------------------------------------------------------

  return {
    newInstance : function(options) { return new BtnView(options); }
  };

})();

Answer 1

只需保留对startRouter中创建的路由器的引用：

myApp.myRouter = new EvtCalRouter()

然后在你的视图中调用该路由器

myApp.myRouter.navigate("myRoute", {trigger: true});