0

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?

Ernests Karlsons
  • 2,220
  • 5
  • 25
  • 37
  • 1
    I think you need to ask a specific question about a specific problem. Asking "How do I build a CMS" is a bit vague. I suggest if you want to learn Backbone then step back a bit and try to build something small. – bradgonesurfing Jul 06 '11 at 06:41
  • Well you have to load them with js. e.g. certain page contains blocks. Page is collection. Blocks are models. When you load page render collection, you can attach events to every model view. – Ivan Ivanic Jul 06 '11 at 08:47
  • i acutally think that my question is not very vague. i need to know how NOT to load all models via javascript, but have them already in the html (with data attributes perhaps?) and tell backbone that those particular models are already loaded. ... and, of course, if that's a good practice at all. – Ernests Karlsons Aug 24 '11 at 10:40

1 Answers1

0

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!

PhD
  • 11,202
  • 14
  • 64
  • 112
  • thanx for the answer! my general problem with views (not EditView, which is instatiated later) is that they must be already pre-rendered in the html sent from the server. the controller must know somehow that this or that html fragment in the html document "belongs" to a particular model and some particular view. how to do that? – Ernests Karlsons Aug 23 '11 at 03:23
  • Could you update your answer with an example? It'd be a great help in helping us solve this problem :) Do you want all the models/views to be created as per the data??? Then that's quite easy! Do the 'explicit' creation in the `$.ready` based on the data that has been sent. Depending on the data you may/not need html5 `data-*` attributes to help 'filter' out the data or just simple classes could help... – PhD Aug 24 '11 at 15:30