javascript mvc framework design practice for edit-in-place interface

Question

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, eg, 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?

Answer 1

Quick answer:

ContentModel: It's the data item you want to edit. The actual content. eg: $(#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(...) ie, 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!