如何使用带有预加载数据的 JavaScript MVVM/MVC
我想加载一个包含现有数据（评论或小部件列表或其他内容）的 HTML 页面，然后使用 Javascript 以与用户与页面交互输入的格式相同的格式呈现其他数据。
- 我想使用存储在 JavaScript 对象中的模型，该对象表示页面上的现有数据以及来自用户输入的新数据，然后观察模型以在 DOM 更改时更新 DOM。
- 我想渲染 JS 模板以快速显示用户输入的数据，而无需再次访问服务器。
我想避免编写呈现相同数据的服务器端和 JavaScript 模板。
为了解决构建初始模型的第一个问题，选项似乎按优先顺序排列：
- 使用 JavaScript 拉取 HTML 中渲染的数据来构建初始模型，或者
- 将 JSON 直接渲染到 DOM 并从中构建 JS 对象或者
- 在页面作为 ajax 调用加载后再次点击服务器以获取 JSON 数据
以避免服务器端和客户端模板显示相同的内容：
- 使用类似 Pure 从 DOM 构建模板，或者
- 仅使用 JS 模板并使用上面第二个选项之一来初始渲染页面（从 JSON 填充它们）渲染到 DOM 或进行 ajax 调用以获取 JSON 来填充它们）。
- 使用适用于服务器和客户端的模板系统。
我觉得这些解决方案都不是特别优雅，我很好奇我可能没有想到的其他模式或者是否有通用的解决方案。
我的环境是Rails 3，但问题适用于任何服务器-> HTML/JS 设置。我可以看到使用 Node.js 之类的东西可能会更容易，但我主要对适用于 Rails 的解决方案感兴趣。
I want to load an HTML page with existing data (a list of comments or widgets or whatever), then use Javascript to render additional data in the same format as it is input by users interacting with the page.
- I'd like to use a model stored in a JavaScript object that represents both existing data on the page as well as new data from user input, then observe to the model to update the DOM when it changes.
- I'd like to render JS templates to display data entered by users quickly, without hitting the server again.
I would like to avoid writing server-side and JavaScript templates that render the same data.
To solve the first problem of building the initial model it seems like the options are, in order of preference:
- Use JavaScript to pull the data rendered in HTML to build the initial model, or
- Render JSON directly to the DOM and build the JS object from that, or
- Hit the server again after the page is loaded as an ajax call to get the data as JSON
To avoid having server-side and client-side templates to display the same thing:
- Use use something like Pure to build templates from the DOM, or
- Only use JS templates and use one of the second options above to initially render the page (populate them from JSON rendered to the DOM or make an ajax call to get JSON to populate them).
- Use a templating system that works on both the server and client.
I feel like none of these solutions are particularly elegant, and I'm curious as to what other patterns I may not have thought of or if there is a common solution.
My environment is Rails 3, but the problems are applicable to any server -> HTML/JS setup. I can see how some of this might be easier with something like Node.js but I'm principally interested in solutions that would apply to Rails.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
有很多方法可以实现这一点。我一直在为同样的问题而苦苦挣扎。我认为一旦你的网络应用程序的复杂性达到一定的阈值，你就必须求助于 javascript 来保持状态正确。 Jquery（以及其他 dom 操作框架）确实很有帮助，但在某种程度上它可能会变成意大利面条代码。
我刚刚接触了这个名为 Knockout 的绑定 javascript 库。它非常优雅且使用简单，它尝试遵循 MVVM 模式，允许您创建一个带有可观察对象的 ViewModel，您可以绑定 html 元素，以便它们的值和属性根据您的 ViewModel 值而变化。
如果您要创建动态 html，则始终可以将 javascript ViewModel 的初始值与页面的 html 一起嵌入，这样就可以避免初始 ajax 调用。
开箱即用，它与 jquery 模板兼容< /a> 这使得 dom 操作变得轻而易举。我刚刚开始使用它，到目前为止我很喜欢它。
希望有帮助。
There's so many ways to accomplish this. I have been struggling with this same issue. I think that once the complexity of your web app reaches a certain threshold you have to resort to javascript to keep the state correct. Jquery (among other dom manipulation frameworks) really help but at a certain point it can become spaghetti code.
I just touched this binding javascript library called Knockout. It's pretty elegant and simple to use it tries to follow the MVVM pattern by allowing you to create a ViewModel with observables that you can bind html elements so that their values and attributes change based on your ViewModel values.
If you're creating dynamic html you can always embed the initial values of the javascript ViewModel along with the html of the page so that you can avoid that initial ajax call.
Out of the box it is compatible with jquery templates which just makes dom manipulation a breeze. I've just started using it and I'm loving it so far.
Hope that helps.