javascript - 主干 View 结构 : how to nest a view in a layout and delegate events

Question

我是 backbone 的新手，我需要创建这样的 View 结构。

<header>
  <nav>...</nav>
</header>
<section id="content">
  here i want to dynamically render a sub-view with its own events..
</section>
<footer>...</footer>

当用户点击导航上的链接时， subview 会发生变化，并且它始终是不同的 subview (例如，带有新闻的 HomeView 或用于身份验证过程的 LoginView ...)

如何在不委托(delegate) LayoutView 上的所有事件的情况下实现这一点？

Answer 1

使用 Backbone.Router .不要在 View 中处理导航链接点击事件，而是将它们的 href 属性与路由匹配。

因此，如果您有这样的导航设置:

<nav>
  <a href="#home">Home</a>
  <a href="#login">Login</a>
</nav>

您的路由器看起来像这样:

Backbone.Router.extend({
  routes: {
    home:   'homePage',
    login:  'loginPage'
  },
  home: function() {
      $("#content").html(new HomeView().render().el);
  },
  login: function() {
      $("#content").html(new LoginView().render().el);
  }
});