编辑就地接口的javascript-mvc框架设计实践

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

例如：

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

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

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

但是，作为一个noob，直到最近我才遇到像backbone.js这样的javascript mvc框架。我一直在服务器端使用MVC（在Kohana中），但从未使用javascript。看起来我可以使用它，但我不清楚，它的策略是什么。我正在开发的CMS是一种混合了javascript应用程序和传统html网站的应用程序。我不明白，如果内容块已经加载到页面html中，我如何使用backbone.js的收集对象（用javascript加载它们对我来说没有意义）

有人有什么建议吗？

快速回答：

ContentModel：您要编辑的数据项。实际内容。e、 g.：

$（#mydiv）.text（）

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

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

EditTemplate：编辑框的“how”对应的html应该是什么样子（可以使用
填充和创建。模板（…）
即文本区域/框等

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

单击“取消”，只需隐藏/删除EditView并显示基础div。如果更新成功（从服务器），只需隐藏EditView并在DisplayView上显示数据！DisplayView可以订阅模型的“更改”事件！因此一旦模型更改，视图就知道该做什么

希望这有帮助！
我想你需要问一个关于特定问题的特定问题。问“我如何构建CMS”有点模糊。我建议如果你想学习主干，那么退一步，尝试构建一些小的东西。你必须用js加载它们。例如，某些页面包含块。页面是集合。块是模型。当你加载页面呈现集合时，你可以将事件附加到每个模型视图。我确实认为我的问题不是很重要gue.我需要知道如何不通过javascript加载所有模型，而是将它们放在html中（可能有数据属性？），并告诉主干网这些特定的模型已经加载了……当然，如果这是一个很好的实践，那么我需要知道答案。thanx！我与视图有关的一般问题（不是EditView，稍后会安装）它们必须已经在服务器发送的html中预先呈现。控制器必须知道html文档中的这个或那个html片段“属于”某个特定的模型和某个特定的视图。如何做到这一点？你能用一个例子更新你的答案吗？这对帮助我们解决这个问题有很大的帮助：）你想根据数据创建所有模型/视图吗？那很简单！根据发送的数据在
$中进行“显式”创建。ready
。根据数据，你可能/不需要html5
数据-*
属性来帮助“过滤”数据，或者只需要简单的类就可以帮助。。。