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

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-Relational 实现多对多关系

    我有一个简单的应用程序 它定义了两个类 一个Person and a PersonGroup 其中存在多对多关系 一个人可以没有组 或者被分配到所有组 以及介于两者之间的任何组 backbonerelational org 上的示例建议对多
  • 依赖注入与托管依赖关系与全局对象

    我正在 Javascript BackboneJS 一个 MVC 框架 RequireJS 框架中工作 但这个问题有点 OO 通用 首先让我解释一下 在 Backbone 中 您的视图是传统视图和控制器的混合 而您的 HTML 模板是传统的
  • 使用主干渲染引导模式

    我认为代码可以更好地解释我的问题 风景 App Views ErrorModal Backbone View extend template window template errorModal render function this e
  • 使用 Rivets.js 迭代 Backbone.js 模型的集合?

    我在用着铆钉 js http rivetsjs com 对于 Backbone 项目中的两个双向数据绑定 并且希望实现迭代绑定 文档表明迭代绑定是可能的 但没有可用的示例 我正在使用一个简单的 Rails API 将 JSON 发送到客户端
  • 渐进增强 - Node.js、Backbone.js

    Node js 服务器有两个角色 前缀为 api 的路由上的 RESTFul API 在其他路线上呈现网站页面 plans features terms 目前 我的所有页面都会呈现一个 正在加载页面 并与 Backbone router 启
  • 与 jQuery 配合使用的backbone.js 替代品?

    有没有像backbone js这样的东西的替代品 它为你的前端javascript提供了一些框架 结构 但没有任何不需要的依赖项 并且与jQuery更紧密地结合在一起 您需要一个易于使用的 MVC 框架吗 因为Sammy js http s
  • Marionette.View 中 UI 元素的可用性

    我只是想了解 Backbone Marionette 关于 UI 元素的观点背后的决定 在现有 DOM 元素上实例化 Marionette View 时 如下所示 view new Marionette ItemView el elemen
  • “Backbone.js 视图”中的单击事件不起作用

    我尝试开始使用backbone js 但我发现当我不使用 body 作为视图的el时 该事件不起作用 这是代码 您可以将其另存为 html 文件并运行
  • 覆盖骨干模型更改事件

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

    我有一个带有多个backbone js 视图的单页Web 应用程序 观点有时必须相互沟通 两个例子 当有两种方式视图同时以不同方式呈现集合时 并且对一个视图中的项目的点击必须转发到另一个视图 当用户转换到流程的下一个阶段时 第一个视图将数据
  • MarionetteJS:应用程序区域与布局[重复]

    这个问题在这里已经有答案了 我正在阅读最新版本 2 3 0 的文档 它说应用程序区域现已被弃用 应用领域 警告 已弃用 此功能已弃用 而不是使用 应用程序作为视图树的根 您应该使用布局 看法 要将布局视图的范围限制为整个文档 您可以设置 它
  • 如何有一个后备路由来捕获backbone.js中的未知页面

    我设置了一组如下所示的路线 routes home home home page home 我想知道的是 如何配置路由 以便如果用户请求未知页面 我可以轻松重定向到静态 404 html 页面 在您的路由器中 例如前两条路由 routes
  • Backbone Marionette CompositeView 排序列表 - 在添加时呈现额外的模型

    这是小提琴 http jsfiddle net QhQ8D 10 http jsfiddle net QhQ8D 10 代码在下面 制作一个聊天应用程序 需要一个排序的 连接的用户列表 名称上带有比较器的图形集合连接到 CompositeV
  • jQuery PUT ajax 请求不起作用

    我正在尝试在 couchdb 中保存 Backbone 模型 因此我已经覆盖了save向 couchdb 发出 ajax 请求的方法 ajax type PUT url http 127 0 0 1 5984 movies this get
  • Marionette CompositeView 为 Collection 中的每个模型呈现自身,而不是 ItemView (Marionette Rails)

    基本上 我试图将 CompositeView 渲染为带有表头的简单四列列表 其中集合中的每个模型都渲染为 并附加到 我正在跟进德里克的一个例子 http jsfiddle net derickbailey me4NK 非常接近 只有一点点变
  • 如何检查侧边栏视图是否已经在主干中渲染?

    通常 用户通过主页进入网站 然后我在那里渲染侧边栏视图 接下来 用户单击链接 路由器呈现另一个视图并替换原始内容视图 侧边栏视图不会重新渲染 当用户在子页面上单击刷新时 侧边栏不会呈现 如何检查视图是否存在并且已渲染 划分责任并坚持下去 不
  • 服务器端MVC+客户端MVC

    一个应用程序既是JS密集型的 又具有复杂的业务逻辑 庞大的数据流 使用backboneJS来构造JavaScript代码 并且还需要服务器端MVC 在本例中是Spring 与客户端 MVC 主干 一起实现服务器端 MVC spring 是一
  • Backbone:仅当事件侦听器尚不存在时才添加

    换句话说 如何找到已收听的事件列表 我正在使用 Backbone on 和 Backbone trigger 在两个彼此不了解的视图之间进行通信 但是 添加侦听器的视图实际上是一个 项目视图 一个集合 所以我添加了许多侦听器 因此我想首先检
  • 使用backbonejs视图,将“onload”事件附加到图像标签的最佳方法是什么?

    我想在backbonejs 视图中为图像附加一个 onload 事件 我目前将其作为 load img function 包含在 事件 中 但它没有被触发 这样做有什么建议吗 Backbone的事件处理基于delegate https st
  • 我在哪里可以找到高级backbone.js示例[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 有人可以指导我找到包含高级backb

随机推荐