如何将 JavaScript MVVM/MVC 与预加载数据一起使用

Question

我想加载一个包含现有数据（cmets 或小部件列表等）的 HTML 页面，然后使用 Javascript 以与与页面交互的用户输入的格式相同的格式呈现其他数据。

1. 我想使用一个存储在 JavaScript 对象中的模型来表示页面上的现有数据以及来自用户输入的新数据，然后观察模型以在 DOM 发生变化时更新它。
2. 我想渲染 JS 模板以快速显示用户输入的数据，而无需再次访问服务器。

我想避免编写呈现相同数据的服务器端和 JavaScript 模板。

为了解决构建初始模型的第一个问题，选项似乎按优先顺序排列：

• 使用 JavaScript 提取以 HTML 呈现的数据以构建初始模型，或
• 将 JSON 直接渲染到 DOM 并从中构建 JS 对象，或者
• 页面加载为 ajax 调用后再次访问服务器以获取 JSON 格式的数据

为了避免让服务器端和客户端模板显示相同的内容：

• 使用 Pure 之类的东西从 DOM 构建模板，或者
• 仅使用 JS 模板并使用上述第二个选项之一来初始呈现页面（从呈现到 DOM 的 JSON 填充它们或进行 ajax 调用以获取 JSON 来填充它们）。
• 使用可在服务器和客户端上运行的模板系统。

我觉得这些解决方案都不是特别优雅，我很好奇还有哪些我可能没有想到的模式，或者是否有通用的解决方案。

我的环境是 Rails 3，但问题适用于任何服务器 -> HTML/JS 设置。我可以看到使用 Node.js 之类的东西可能会更容易一些，但我主要对适用于 Rails 的解决方案感兴趣。

Answer 1

有很多方法可以做到这一点。我一直在努力解决同样的问题。我认为一旦您的网络应用程序的复杂性达到某个阈值，您就必须求助于 javascript 来保持状态正确。 Jquery（在其他 dom 操作框架中）确实有帮助，但在某些时候它可能会变成意大利面条代码。

我刚刚接触了这个名为Knockout 的绑定javascript 库。它使用起来非常优雅和简单，它尝试遵循 MVVM 模式，允许您创建一个带有可观察对象的 ViewModel，您可以绑定 html 元素，以便它们的值和属性根据您的 ViewModel 值发生变化。

如果您正在创建动态 html，您始终可以将 javascript ViewModel 的初始值与页面的 html 一起嵌入，这样您就可以避免初始 ajax 调用。

开箱即用，它与 jquery templates 兼容，这让 dom 操作变得轻而易举。我刚刚开始使用它，到目前为止我很喜欢它。

希望对您有所帮助。