如何使用JavaScript MVVM/MVC预加载数据

model view controller - How to use JavaScript MVVM/MVC with pre-loaded data

本文关键字：加载 数据 MVC 何使用 JavaScript MVVM      更新时间：2023-09-26

我想加载一个带有现有数据的HTML页面(评论列表或小部件或其他)，然后使用Javascript以与页面交互的用户输入的相同格式呈现其他数据。

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

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

要解决构建初始模型的第一个问题，似乎有以下选项，按照偏好顺序:

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

避免服务器端和客户端模板显示相同的内容:

  • 使用Pure之类的东西从DOM构建模板，或者
  • 只使用JS模板，并使用上面的第二个选项之一来初始渲染页面(从渲染到DOM的JSON填充它们或通过ajax调用获得JSON来填充它们)。
  • 使用一个在服务器和客户端都工作的模板系统。

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

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

有很多方法可以做到这一点。我也一直在为同样的问题而挣扎。我认为，一旦你的web应用的复杂性达到一定的阈值，你必须求助于javascript来保持状态正确。Jquery(以及其他dom操作框架)确实很有帮助，但在某种程度上，它可能会变成意大利面条代码。

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

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

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

希望对你有帮助。

相关文章：