需要帮助了解主干中嵌套视图的基础知识

2024-04-25

我一直在阅读有关backbone.js 中嵌套视图的大量内容,并且了解其中的很多内容,但仍然令我困惑的一件事是……

如果我的应用程序有一个 shell 视图,其中包含页面导航、页脚等子视图,这些子视图在使用应用程序的过程中不会改变,那么我是否需要为每个路由渲染 shell,或者我是否需要执行某种操作检查视图以查看它是否已经存在?

在我看来,如果有人在应用程序中前进之前没有点击“主页”路线,就会出现这种情况。

我在谷歌搜索中没有发现任何对此有帮助的信息,所以任何建议都是值得赞赏的。

Thanks!


由于您的“shell”或“布局”视图永远不会改变,因此您应该在应用程序启动时渲染它(在触发任何路由之前),并渲染更多视图into布局视图。

假设您的布局如下所示:

<body>
  <section id="layout">
    <section id="header"></section>
    <section id="container"></section>
    <section id="footer"></section>
  </section>
</body>

您的布局视图可能如下所示:

var LayoutView = Backbone.View.extend({
  el:"#layout",
  render: function() {
    this.$("#header").html((this.header = new HeaderView()).render().el);
    this.$("#footer").html((this.footer = new FooterView()).render().el);
    return this;
  },

  renderChild: function(view) {
    if(this.child) 
      this.child.remove();
    this.$("#container").html((this.child = view).render().el); 
  }
});

然后,您可以在应用程序启动时设置布局:

var layout = new LayoutView().render();
var router = new AppRouter({layout:layout});
Backbone.history.start();

在你的路由器代码中:

var AppRouter = Backbone.Router.extend({
  initialize: function(options) {
    this.layout = options.layout;
  },

  home: function() {
    this.layout.renderChild(new HomeView());
  },

  other: function() {
    this.layout.renderChild(new OtherView());
  }
});

有很多方法可以给这只特定的猫剥皮,但这是我通常处理它的方式。这为您提供了单点控制(renderChild)用于渲染“顶级”视图,并确保前一个元素是removed 在新的渲染之前。如果您需要更改视图的呈现方式,这也可能会派上用场。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

需要帮助了解主干中嵌套视图的基础知识 的相关文章

  • Backbone 中仅限客户端的属性

    我有一个相当通用的模型和该模型的集合 见下文 我正在将其作为一系列视图的基础 在几个视图上 选择其中一个模型会生成操作 通过 selected 属性 并且我需要能够仅在客户端跟踪选择 然而 在 Backbone 中似乎没有干净的方法来做到这
  • 在 Backbone.js 中,为什么静默更改最终会触发更改事件?

    当我经过时 silent true 在 Backbone 模型中设置属性时 为什么不直接抑制change attribute事件 下次更改属性时触发该事件有什么好处 Update Backbone 0 9 10 改变了传递行为 silent
  • 如何将属性传递到 Backbone 视图?

    我正在使用 Backbone v1 0 0 开发我的应用程序 在开始工作期间 现在已经更新到 v1 1 0 所以在我以前能做的地方 var myView new MyView hash something 并访问hash在视图内部使用 th
  • 使用 $(function 等启动 javascript 代码

    我正在研究 Backbone 和来自的待办事项示例应用程序http todomvc com http todomvc com 我注意到有 3 种方法可以在文件中启动代码 function code here function code he
  • 主干导航在 Firefox 中触发两次

    尝试使用 Backbone 的导航属性 this navigate week companyName employeeNo weekEnd trigger true replace false 上面的代码执行一次 它击中了这个 routes
  • 如果用户尚未登录,我如何拒绝他们访问我的 Backbone 应用程序的部分内容?

    所以我有一个 Backbone 应用程序 网页主页 现在 如果您登录我的网站 我会使用数据库中的用户详细信息创建一个全局对象 但是 您仍然可以直接点击应用程序中的其中一条路线 我应该如何处理未 登录 的用户并将他们重定向到 您必须登录页面
  • 从 Backbone 检索 Rails/devise current_user

    我有一个应用程序 可以通过 Devise 管理 Rails 的注册 输入 退出 当我登录时 我被重定向到 Backbone 启动的 Dashboard index 我想以某种方式在 Backbone 中检索我的 current user i
  • 使用 $.html() 时如何提高渲染性能

    我正在研究骨干demo app https jsfiddle net o75r7fu9 8 显示推文列表 当我用不同的数据替换所有 推文 时 我使用以下命令清除列表 html render function item table html
  • 类型错误:“未定义”不是函数(评估“sinon.spy()”)

    我正在尝试使用sinon js http sinonjs org 在测试骨干应用程序时 但不幸的是 由于错误 我无法使用间谍方法 TypeError undefined is not a function evaluating sinon
  • Rails:backbone-on-rails gem-

    尝试按照 Ryan Bates Backbone js 教程构建抽奖应用程序 但我已经遇到了第一部分代码的问题 在 application js 的 init 函数中 他初始化了 Raffler 路线的新实例 该实例应该触发警报 主页 但我
  • 依赖注入与托管依赖关系与全局对象

    我正在 Javascript BackboneJS 一个 MVC 框架 RequireJS 框架中工作 但这个问题有点 OO 通用 首先让我解释一下 在 Backbone 中 您的视图是传统视图和控制器的混合 而您的 HTML 模板是传统的
  • Backbone.js / Marionette.js 中的路由 - 无主题标签、路由列表和子路由器

    我对 Backbone js Marionette js 中的路由有三个问题 1 如何获取我的应用程序路由器已注册的所有路由的列表 例如对于 Express js 在 Node js 中 它将是app routes 我尝试对 Backbon
  • 覆盖骨干模型更改事件

    我认为我想做的事情很简单 我只是不知道该怎么做 当我的模型属性之一发生更改以便将一些数据传递给事件处理程序时 无论更改是值的增加还是减少 我想触发我自己的事件 基本上我希望我的处理程序在视图中执行此操作 handler function i
  • backbone.js - 如何在视图之间进行通信?

    我有一个带有多个backbone js 视图的单页Web 应用程序 观点有时必须相互沟通 两个例子 当有两种方式视图同时以不同方式呈现集合时 并且对一个视图中的项目的点击必须转发到另一个视图 当用户转换到流程的下一个阶段时 第一个视图将数据
  • 如何从 Backbone 集合中提取多个属性?

    我试图从 Backbone 集合中提取多个属性 但它返回undefined 收藏 id 1 name raju age 23 sex male hobbies id 2 name ramesh age 43 sex male hobbies
  • 对周围的所有 Node JS 框架/库等感到困惑 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我感觉有点困惑 有很多 Node js 相关 东西 的框架 有人能给我一个概述吗 以下库 框架 其他内容如何相互关联 交互 其中包括什么或
  • 每次分页获取后将数据附加到同一集合

    我正在尝试使用主干填充 Instagram 图像 我基本上有以下3个模型 用户模型存储与 Instagram 相关的所有用户信息 App Models User Backbone Model extend defaults id acces
  • backbone.js + require.js + 用户认证

    开始学习backbone js和require js 不确定如何通过用户身份验证构建 Web 应用程序的文件 看起来应该是这样的 On app init query server to check auth session state Q
  • 主干集合排序

    我制作了我的第一个主干应用程序 但在集合排序方面遇到了一些问题 使用这个后 var SortedFriends MyFriends sortBy function friend return friend get uid console l
  • 如何填充 Backbone.js 集合的 _byId 数组以便我可以在其上使用“get”?

    我有一个收藏 并且collection models返回模型数组 然而 当我打电话时collection get someId 这个id是模型的idcollection models数组 我得到undefined 看着collection

随机推荐