0

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

例如：

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

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

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

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

有人有什么建议吗？

4

1 回答 1

0

快速回答：

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

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

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

EditTemplate：编辑框的“如何”对应的 html 应该看起来像（可以使用_.template(...)例如 textarea/box 等填充和创建，

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

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

希望这可以帮助！

于 2011-08-18T19:31:58.787 回答