javascript mvc框架就地编辑界面设计实践
我正在编写一个 CMS，它允许以所见即所得的方式在网站上创建和编辑元素（内容块）。基本上，登录后，您会在视觉上看到相同的网站，但将鼠标悬停并单击元素会弹出编辑器（如 Aloha）或其他控件。
例如：
- 将鼠标悬停在一个段落上会显示 侧面的小菜单允许 在左、中和之间进行选择 右对齐
- 单击段落将使其可编辑
- 将鼠标悬停在图像上将在图像的右侧显示一个点，可以拖动该点，从而更改图像的宽度（高度将按比例更新）
- 将鼠标悬停在图像中的任何块上网站会弹出一个“+”按钮，允许在悬停块之前创建另一个块。
- 我目前的策略是
使用我在 Nike Better World 上看到的类似技术，并且从那时起就一直在使用：有一个实例化 javascript，它在每个具有 data-controller 属性的 html 元素上调用 jquery 插件，插件的名称由 data-controller 属性指定。
稍微扩展这个概念，我将使用它将各种控件附加到内容块。
但是，作为一个菜鸟，直到最近我才遇到了像backbone.js这样的javascript mvc框架。我一直在服务器端（在 Kohana 中）使用 MVC，但从未在 javascript 中使用过。看起来我可以使用它，但我不清楚策略是什么。我正在开发的 CMS 是一种适当的 javascript 应用程序和老式 html 网站之间的混合体。我不明白，如果它们已经加载到页面 html 中（对我来说用 javascript 加载它们没有意义），我如何使用例如backbone.js 的内容块集合对象。
有人有什么建议吗？
I am programming a CMS that allows creating and editing elements (content blocks) on the site in a WYSIWYG manner. basically, when logged in, you see visually the same website, but hovering and clicking on elements brings up either editors (like Aloha) or additional controls.
For instance:
- hovering a paragraph would display a
small menu on its side which allows
selecting between left, center and
right alignment - clicking on a paragraph would make it editable
- hovering over an image would display a dot on the right side of the image, which can be dragged thus changing the width of the image (height would update proportionally)
- hovering any of the blocks in the website would bring up a "+" button that allows to create another block before the hovered block.
- etc.
My current strategy is to use a similar technique that i saw used on Nike Better World and have been using ever since: there's an instantiating javascript that invokes jquery plugin on each html element that has a data-controller attribute, the name of the plugin being specified by the data-controller attribute.
Slightly extending this concept i would use it to attach all kinds of controls to the content blocks.
But, being a noob, only recently i came across javascript mvc frameworks like backbone.js. I've been working with MVC on the server side (in Kohana), but never yet in javascript. It seems that i can use it, but it's unclear to me, what would be the strategy. The CMS i'm working on is a kind of a hybrid between a proper javascript application, and an old-school html website. I don't understand, how can i use, e.g., backbone.js's collection object for content blocks, if they are already loaded in the page html (that doesn't make sense to me to load them with javascript).
does anybody have any suggestions?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
快速回答：
ContentModel：这是您要编辑的数据项。实际内容。例如：
$(#mydiv).text();DisplayView：将显示此数据的视图（这是 ContentModel 首次实例化并使用
$('#mydiv).text 初始化的位置()EditView：“编辑”此数据的视图（可能是文本区域） - 创建时，使用 ContentModel （同一模型对象）初始化
EditTemplate：编辑框“如何”的相应 html 应该是什么样子（可以填充和使用
_.template(...)创建，即文本区域/框等，现在 DisplayView 在初始化时保存文本（在其模型中）的当前值，如果您有“编辑”。 ' 在此视图上的按钮/链接（例如 div 块），单击它会创建一个新的 EditView，并“隐藏”当前显示文本的 div (#mydiv)，并显示在其位置加载了模型数据的 EditView （
$.append()是你最好的朋友在这里）。您点击取消，只需隐藏/删除 EditView 并显示底层 div 即可。并在 DisplayView 上显示数据！ DisplayView可以订阅模型的“change”事件！所以一旦模型发生变化，视图就知道要做什么！
希望这有帮助！
Quick answer:
ContentModel: It's the data item you want to edit. The actual content. e.g.:
$(#mydiv).text();DisplayView: The view that will display this data (This is where ContentModel is first instantiated and initialized with
$('#mydiv).text()EditView: The view of "editing" this data (a text area perhaps) - When created, initialized with the ContentModel (same model object)
EditTemplate: The corresponding html of "how" the edit box should look like (can populate and create using
_.template(...)i.e, a textarea/box etc.,Now DisplayView holds the current value of the text (in it's model) at initialization itself. If you have an 'edit' button/link on this view (a div block for example), clicking it creates a new EditView and just "hides" the current div (#mydiv) that is showing the text and shows the EditView loaded with the model data in it's place (
$.append()is your best friend here).You click cancel, just hide/remove EditView and show the underlying div back. If you update, on success (from server) just hide the EditView and show the data on DisplayView! DisplayView can subscribe to the "change" event of the model! So once the model changes, the view knows what to do!!
Hope this helps!