就地编辑界面的javascript mvc框架设计实践

Question

我正在编写一个 CMS，它允许以所见即所得的方式在网站上创建和编辑元素（内容块）。基本上，登录后，您会在视觉上看到同一个网站，但悬停并单击元素会显示编辑器（如 Aloha）或其他控件。

例如：

• 悬停段落会显示 侧面的小菜单允许 在左，中和之间选择 右对齐
• 点击段落可编辑
• 将鼠标悬停在图像上会在图像右侧显示一个点，可以拖动该点从而改变图像的宽度（高度会按比例更新）
• 将网站中的任何块悬停会弹出一个“+”按钮，允许在悬停的块之前创建另一个块。
• 等

我目前的策略是使用我在Nike Better World 上看到的并且一直使用的类似技术：有一个实例化 javascript，它在每个具有 data-controller 属性的 html 元素上调用 jquery 插件，名称为由 data-controller 属性指定的插件。

稍微扩展这个概念，我会用它来将各种控件附加到内容块。

但是，作为一个菜鸟，直到最近我才遇到了 javascript mvc 框架，例如backbone.js。我一直在服务器端（在 Kohana 中）使用 MVC，但还没有在 javascript 中使用。似乎我可以使用它，但我不清楚，策略是什么。我正在开发的 CMS 是一种介于适当的 javascript 应用程序和老式 html 网站之间的混合体。我不明白，我如何使用，例如，backbone.js 的内容块的集合对象，如果它们已经加载到页面 html 中（这对我来说用 javascript 加载它们没有意义）。

有人有什么建议吗？

Answer 1

快速回答：

ContentModel：这是您要编辑的数据项。实际内容。例如：$(#mydiv).text();

DisplayView：将显示此数据的视图（这是 ContentModel 首次实例化并使用 $('#mydiv).text() 初始化的地方

EditView：“编辑”此数据的视图（可能是文本区域）- 创建时，使用 ContentModel 初始化（相同的模型对象）

EditTemplate：编辑框“如何”的相应 html（可以使用_.template(...) 填充和创建，即文本区域/框等，

现在 DisplayView 在初始化时保存文本的当前值（在它的模型中）。如果您在此视图上有一个“编辑”按钮/链接（例如 div 块），单击它会创建一个新的 EditView 并只是“隐藏”当前显示文本的 div (#mydiv) 并显示加载的 EditView模型数据在它的位置（$.append() 是你最好的朋友）。

您单击取消，只需隐藏/删除 EditView 并显示底层 div。如果您更新，成​​功时（来自服务器）只需隐藏 EditView 并在 DisplayView 上显示数据！ DisplayView 可以订阅模型的“更改”事件！所以一旦模型发生变化，视图就知道该怎么做了！！

希望这会有所帮助！