如何将一个页面导航到另一个视图？

Question

我正在尝试在主干中制作简单的应用程序。实际上我想在 url 更改时调用方法。我想了解主干路由的工作原理。我研究了路由，但是当我更改 url 时我的警报不显示。 当我用这个 “#contacts” 附加 url 但它没有调用这个方法

listContacts: function () {
          alert("route")
            console.log("route to list contacts was triggered");
            ContactsApp.List.Controller.listContacts();
        }

我们可以在单击列表的任何项目时移动到下一页或查看。实际上我想在使用主干路由单击行后将一页移动到另一页？

这是我的代码 http://plnkr.co/edit/yN16uPgk0dcJAcrApewH?p=preview

app.module("ContactsApp", function (ContactsApp, app, Backbone, Marionette, $, _) {
   // console.log(app)
    ContactsApp.Router = Marionette.AppRouter.extend({
        appRoutes: {
            "contacts": "listContacts"
        }
    });
    var API = {
        listContacts: function () {
          alert("route")
            console.log("route to list contacts was triggered");
            ContactsApp.List.Controller.listContacts();
        }
    };
    ContactsApp.on("start", function () {
        new ContactsApp.Router({
            controller: API
        });
    });
});

有任何使用木偶的更新吗？

Answer 1

您需要使用Backbone Router。

var app = new Marionette.Application();

app.addRegions({
  'main': '#main1'
});

var Router = Backbone.Router.extend({
  routes: {
    'item(/*id)': 'item',
    '*params': 'home'
  }
});

app.router = new Router();

// Home route
app.router.on('route:home', function() {
  var page = new HomeView({...})
  app.main.show(page);
});

// Item route
app.router.on('route:item', function(id) {
  var page = new ItemView({id:id, ...})
  app.main.show(page);
});

...

app.start();
Backbone.history.start({pushState: true});

这是你的modified code。