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

Backbone view structure: how to nest a view in a layout and delegate events

本文关键字：视图 嵌套 事件 布局 结构      更新时间：2023-09-26

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

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

当用户点击导航上的链接时，子视图发生变化，并且它总是一个不同的子视图(例如，带有新闻的HomeView或用于身份验证过程的LoginView…)

我怎么能做到这一点，没有委派所有的事件在LayoutView?

使用Backbone.Router。与其在视图中处理导航链接点击事件，不如用路由匹配它们的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);
  }
});
相关文章：