主干视图结构:如何在布局和委托事件中嵌套视图。

i'm new on backbone, and i need to create a view structure like this.

我是一个新的骨干，我需要创建一个这样的视图结构。

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

the sub-view changes when the user click on a link on the navigation, and its always a different sub-view (the HomeView with the news or the LoginView for the authentication process, for example...)

子视图在用户单击导航上的链接时发生变化，它始终是一个不同的子视图(例如，带有新闻的HomeView或身份验证过程的LoginView)。

How can i achieve this, without delegating all the events on the LayoutView?

我怎样才能做到这一点，而不把所有的事件都委托给LayoutView?

1 个解决方案

#1

Use the Backbone.Router. Instead of handling the navigation link click events in a view, match their href properties up with routes.

使用Backbone.Router。与其在视图中处理导航链接，不如将它们的href属性与路由匹配。

So if you have a navigation setup like this:

如果你有这样的导航设置:

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

Your router would look something like this:

你的路由器大概是这样的:

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

#1