如何将 Knockout js 模型绑定到向导风格的 UI

2024-03-19

我正在使用 Knockout js。我有一个包含对象数组的视图模型,我希望允许用户使用向导样式界面编辑其中一个对象。我遇到的问题是向导将根据所做的选择显示不同的步骤。例如:

  • 如果用户在步骤 1 中选择“是”,则我将显示步骤 2a
  • 如果用户在步骤 1 中选择“否”,则我将显示步骤 2b(即不同的对话框形式)

如此下去,使得通过向导的路径不是线性的。

我的问题是我是否在启动时将所有可能的向导 UI 步骤绑定到视图模型即使某些步骤永远不会显示,并且某些屏幕上的绑定将无效(例如,步骤 5 可能绑定到 viewModel.theObject.PropertyA.PropertyB.PropertyC(),但 PropertyB 在步骤 1 中仍然为 null)。

更好的方法可能是在显示的 UI 步骤时绑定到它们,但我的问题是,我不知道在步骤完成后“取消绑定”模型的好方法,因此我最终可能会将步骤绑定到原始列表中的多个对象!


我认为实现此目的的一个好方法是让您的视图模型成为一系列步骤并将您的 UI 绑定到“selectedStep”。然后,每个步骤都可以动态选择它想要使用的模板(就像这样post http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html).

这是这个想法的一个粗略示例:http://jsfiddle.net/rniemeyer/SSY6n/ http://jsfiddle.net/rniemeyer/SSY6n/

这样,模板绑定就可以根据选择的任何步骤来处理动态内容的生成/绑定/清理。如果步骤位于 observableArray 中,那么您甚至可以动态添加步骤。也许您有一个所有可能步骤的列表,然后有一个“activeSteps”数组,表示根据用户的选择当前有效的步骤。

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

如何将 Knockout js 模型绑定到向导风格的 UI 的相关文章

随机推荐

  • GIT 重命名分支并保留所有提交历史记录

    我有一个关于重命名 git 分支的问题 我创建了一个本地分支dev并将分支推送到远程 我做了很多工作dev分支并定期更新远程分支 现在我想更改分支的名称dev to development 我知道如何重命名 GIT 中的分支 我的问题是 如
  • flex 中 yywrap() 的含义

    该指令在 flex lex 中意味着什么 define yywrap 1 和这个 t 我在下面的代码中找到它 t putchar t 输入 你好世界 输出 你好世界 根据Lex 和 Yacc 页面 http dinosaur compile
  • 如何更改字符串日期的日期格式

    我有像这样的字符串形式的日期 String date 11 12 2018 我想把它改成 2018 12 11 具有相同的变量 因此 我尝试了下面的代码 但它没有给出我期望的输出 String date 11 12 2018 SimpleD
  • 在 C 中,作为参数传递时,“&function”和“function”之间有什么区别?

    例如 include
  • File.Open的默认目录是什么?

    我有这个代码 Stream f File Open data majid FileMode OpenOrCreate FileAccess ReadWrite 文件将在哪里创建 From the File OpenMSDN 文档 http
  • 在哪里可以下载旧版本的 Dart SDK

    我需要获取旧版本的 Dart SDK 来解决问题 具体来说是 Dart SDK 1 5 1 但 dartlang 当前的稳定版本是 1 6 0 是否有一个 URL 可以让我获取所有过去的 Linux 或 MacO 版本的 SDK Updat
  • 这些是 nativecrypto 错误消息吗?

    当我的 Android 手机和服务器之间建立 TLS 连接时 我得到以下信息nativecrypto error messages in logcat 06 30 21 55 06 565 E NativeCrypto 24826 ssl
  • *如果使用 v6 ImageList 控件,.bmp 会丢失透明背景

    抱歉 我的英语不是很好 我需要在我的 D7 应用程序中使用半透明位图图片 所以 我应该使用 XPManifest 和 ImageList version6 而不是 5 8 标准版 但在这种情况下 我遇到了一个问题 当我从流中加载图像时 所有
  • 如何使用标量手动更改 Android AudioTrack 流的增益级别?

    我正在使用 Android AudioTrack 对象来传输 16 位单声道 PCM 文件 我的代码从 DataInputStream 读取双精度值 将其转换为 8 字节 然后将该 8 字节保存到缓冲区以写入 AudioTrack 这很好用
  • 相同模块不同外壳。为什么?

    Windows 上的 minikube 和 docker machine 在确定 hyper v 模块是否可用时出现了一些问题 了解更多信息 https github com kubernetes minikube issues 2634
  • 将文件夹中的所有文件重命名为编号列表 1.jpg 2.jpg [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 询问代码的问题必须对所解决的问题表现出最低限度的了解 包括尝试的解决方案 为什么它们不起作用以及预期结果 也可以看看 Stack Over
  • 返回 404 的 Rest Web 服务

    这是我第一次使用 Eclipse 这让我非常愤怒 我安装了 Tomcat 6 0 下载了 Jersey 库 并按照以下教程进行操作 http www vogella com articles REST article html first
  • 创建图标按钮 - Android

    我想创建一个小图标按钮 如下所述在材料指南的这一章中 https www google com design spec components buttons html buttons other buttons 但我找不到任何关于如何做到这
  • 我可以调整 tkMessagebox 创建的消息框的大小吗?

    我想用固定宽度的 tkMessagebox 创建信息对话 我在 tkMessagebox showinfo 函数中没有看到任何可以处理此问题的选项 有什么办法吗 谢谢 option add 可能仅适用于 Linux 操作系统 但您可以控制字
  • Javascript:xmlhttprequest 随机卡在就绪状态 1

    我一直在开发一个 Windows 小工具 即 浏览器 是 Internet Explorer 用于查询指定子网地址以获取信息 现在 它有时会以相对较快的速度 大约每 5 秒 执行此操作 而且效果很好 然而 有时它会卡在就绪状态 1 并且永远
  • 使用 Popen.stdin 执行多个命令

    我想使用管道在从 python 脚本启动的独立应用程序中执行多个命令 我可以可靠地将命令传递到程序的标准输入的唯一方法是使用 Popen communicate 但它会在命令执行后关闭程序 如果我使用 Popen stdin write 则
  • 如何列出导入的模块及其版本?

    我需要列出所有导入的模块及其版本 我的一些代码仅适用于特定版本 我想保存包的版本 以便将来再次查找 列出包的名称有效 modules list set sys modules set globals print modules 但如果我现在
  • 注入自动映射器

    我一直致力于将 AutoMapper 注入控制器 我喜欢 Code Camp Server 的实现 它围绕 AutoMapper 的 IMappingEngine 创建一个包装器 依赖注入是使用 StructureMap 完成的 但我需要在
  • 有什么办法让 gmaps4rails 在街景中打开地图吗?

    我尝试过更改缩放级别 但它始终保持在地图模式 在wiki上也找不到任何信息 任何帮助或其他建议将不胜感激 最终只使用了 Google 的 Javascript API 事情是这样的 pos new google maps LatLng va
  • 如何将 Knockout js 模型绑定到向导风格的 UI

    我正在使用 Knockout js 我有一个包含对象数组的视图模型 我希望允许用户使用向导样式界面编辑其中一个对象 我遇到的问题是向导将根据所做的选择显示不同的步骤 例如 如果用户在步骤 1 中选择 是 则我将显示步骤 2a 如果用户在步骤