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 回答