骨干木偶路由问题答案

【问题标题】：Backbone Marionette Routing issue骨干木偶路由问题
【发布时间】：2014-09-10 00:16:50
【问题描述】：

我正在尝试在我的骨干网中设置路由。Marionette 应用程序，我是 Backbone 的新手。

我有 JS 喜欢

var firstProject= new Marionette.Application();

firstProject.addRegions({
    main   : 'main',
});

//my router
var MyRouter = Backbone.Marionette.AppRouter.extend({
  // "someMethod" must exist at controller.someMethod
  appRoutes: {
     "first" : "someOtherMethod"
  },

  /* standard routes can be mixed with appRoutes/Controllers above */
  routes : {
    "second" : "someOtherMethod"
  },
  someOtherMethod : function(){
      alert('hi')
  }
});


firstProject.on('initialize:after', function(){   
    if(Backbone.history){
        Backbone.history.start();

    } 
});

在我的 html 中，我有

<a href="#/first" class="btn btn-primary btn-lg" role="button">First product</a>
<a href="#/second" class="btn btn-primary btn-lg" role="button">First product</a>

当我单击链接时，我想浏览我的页面以加载我的第一个 html 页面和第二个 html 页面。我已经阅读了文档，但它们有点复杂。有人可以给我一个提示吗？非常感谢！

【问题讨论】：

尝试将/从href中取出。只需使用#first 和#second
你确定你的主要区域选择器是main 你的意思是.main 还是#main？

标签： html backbone.js marionette

【解决方案1】：

路由应用的最简单形式是使用 AppRouter 的属性“路由”，如下所示。

var firstProject= new Marionette.Application();

firstProject.addRegions({
    main   : 'main',
});

//my router
var MyRouter = Backbone.Marionette.AppRouter.extend({

  /* standard routes can be mixed with appRoutes/Controllers above */
  routes : {
    "second" : "secondMethodFromThisObject",
    "first" : "firstMethodFromThisObject"
  },
  firstMethodFromThisObject : function(){
      alert('hi');
  },
  secondMethodFromThisObject : function(){
      alert('hi');
  }
});


firstProject.on('initialize:after', function(){   
    if(Backbone.history){
        Backbone.history.start();
    } 
});

如果您想使用 appRoutes 属性，就像您的应用程序更大时通常那样。你最好像下面这样。

var firstProject= new Marionette.Application();

firstProject.addRegions({
    main   : 'main',
});

//my router
var MyRouter = Backbone.Marionette.AppRouter.extend({

  /* standard routes can be mixed with appRoutes/Controllers above */
  appRoutes : {
    "first" : "firstMethodFromController",
    "second" : "secondMethodFromController"
  }
});

var MyController = Marionette.Controller.extend({
    "secondMethodFromController": function() {
        alert('Hi from inside the controller');
    },
    "firstMethodFromController": function() {
        alert('Hi from inside the controller');
    }
});

firstProject.addInitializer(function () {
    // initialize routes with controller
    new MyRouter({ controller: new MyController });
});

firstProject.on('initialize:after', function(){   
    if(Backbone.history){
        Backbone.history.start();
    } 
});

【讨论】：