程序员经验分享-hwhale

Backbone.js 多步骤表单

2024-03-19

我希望在我的网站上为“即时报价”类型的内容制作一个逐步表格。我在 Photoshop 上制作了以下图像，这是非常不言自明的，我希望用户在表单的每个步骤中输入信息并最终在第 3 步提交表单（进入下一步应该是无缝的，无需重新加载页面） 。

有人可以给我一些一般性的指示，我应该如何解决这个问题吗？这是我使用backbone.js 的第一个项目，它确实有助于对处理这个特定小部件的最佳方法有一个高层次的概述。

Thanks


我将其结构如下：

1. 实现数据收集模型

拥有一个收集各个阶段数据的单一模型。实现该模型的存储，并允许部分完成的数据。 （您可能希望在每个阶段存储此信息，以便用户可以稍后返回）。

2. 实现通用的“多阶段”视图

这应该负责渲染顶部的选项卡/阶段、渲染向后/向前的导航元素以及渲染子视图。

3. 实现每个阶段的具体子视图

这些应该在上述模型的位上运行。

4. 实现路由

您可能希望每个子视图使用不同的 URL 路由，或者您可能希望整个多阶段过程使用相同的 URL。无论哪种方式，路由器都需要创建外部多阶段视图和内部子视图（或多个视图），并将它们与适当的模型连接在一起。

5. 提示：利用 pub/sub

不要将你们的观点紧密结合起来。使用某种形式的发布/订阅来引发和侦听自定义事件。 （例如：http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/ http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/)

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

backbonejs

Backbone.js 多步骤表单 的相关文章

  • jQueryMobile：未捕获类型错误：无法调用未定义的方法“_trigger”

    我正在使用 jQuery Mobile 和backbone js 当我加载主页时出现以下错误 Uncaught TypeError Cannot call method trigger of undefined 这就是我加载主页的方法 在r

  • 类型错误：“未定义”不是函数（评估“sinon.spy()”）

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

  • Backbone.View“el”混淆

    视图应该如何el被处理 必须设置它 否则事件不会触发 请参阅here https stackoverflow com questions 4909564 backbone js why isnt this event bound 但它应该是

  • 主干表视图消耗行视图 - 如何构造？

    我有一组模型希望在表格视图中呈现 每个模型应由表中的一行表示 并且该行应使用模板生成 我应该能够将事件处理程序附加到该行 例如单击 在事件发生时发出有关与该行关联的模型的一些特定信息 我见过类似的事情的一种常见方法是将每一行分解到它自己的视

  • 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.js 进度条

    我想在用新内容更新应用程序时显示进度条 我想最好的办法是在集合上调用 fetch 时执行此操作 我获取的内容主要是图像 视频海报等 但我只获取链接 而不是 base64 字符串或大的东西 我想做的是在获取图像链接时用进度条覆盖屏幕 渲染视图

  • 主干集合排序

    我制作了我的第一个主干应用程序 但在集合排序方面遇到了一些问题 使用这个后 var SortedFriends MyFriends sortBy function friend return friend get uid console l

  • Backbone.Marionette 与 Backbone-Boilerplate

    我是 Backbone 的新手 正在尝试决定如何进行开发 目前我想知道人们什么时候会使用backbone marionette而不是backbone boilerplate 据我所知 Marionette 的规范性更强 但这是大多数人进行开

  • Backbone.js 模型或视图中的类私有属性

    模型中是否可以拥有私有属性 就像 构造函数 函数中本地声明的变量一样 不附加到this 但仅在 构造函数 函数中定义的内容在本地声明且可见 没有 BB 视图的示例 function MyView aModel var internalInp

  • 在 Node js 应用程序中加载backbone.js

    我正在使用node js 和backbone 来构建网络应用程序 Backbone 是我的软件包要求的一部分 我之前使用过 Rails 和 Backbone 辅助 gem 非常适合将需要到达客户端的所有资产 js 文件 拼凑在一起 话虽如此

  • 将 Backbone.js 集合渲染为选择列表

    我正在尝试将 Backbone js 集合渲染为select使用 Underscore js 模板创建列表 并且该列表未填充 这select元素正在显示 但没有options 我已经确认我能够将各个属性传递到我的模板中并将它们呈现为labe

  • Backbone.js 和本地存储。必须指定“url”属性或函数

    我正在提高有关 Backbone js 的知识 并从教程中获取了此代码示例 http bardevblog wordpress com 2012 01 16 understanding backbone js simple example

  • 首选的客户端路由解决方案？ [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • 将 Backbone 结构转换为 TypeScript

    看看 Backbonejs 的实现扩展功能 http backbonejs org docs backbone html section 186 它表明它不是一个基本的原型扩展 当主干扩展直接转换为 TypeScript 类时 有些东西会停

  • 忽略下划线模板中未定义的数据/变量

    仍在学习骨干 所以请耐心等待 我正在尝试向视图添加一个带有空白字段的新模型 但我创建的模板有一大堆

  • 为什么 Backbone.js 模型的“on()”将“this”作为最后一个参数（如果它几乎总是如此）？

    我刚刚接触 Backbone 我不明白的一件事是为什么模型的 on 方法总是采用三个参数 事件 处理程序和上下文 似乎几乎总是 this 用于上下文 我还没有看到任何其他用法 即使有 因为我还没有见过 那一定是相当罕见的 所以我的问题是 什

  • 我在哪里可以找到高级backbone.js示例[关闭]

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

  • 在 Backbone.js 和 Underscore.js 中绑定回调

    我有以下代码 initialize function bindAll this var callBack function res window item new Item res this render bind callBack thi

随机推荐

热门标签