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

Question

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

例如：

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

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

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

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

有人有什么建议吗？

Answer 1

快速回答：

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

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

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

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

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

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

希望这可以帮助！