StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCode organization in JavaScript: MVC? Self-rendering components?
primarykey
Id
5349549
data
AcceptedAnswerId
5349639
AnswerCount
3
ClosedDate
CommentCount
3
CommunityOwnedDate
CreationDate
2011-03-18T08:22:05.733
FavoriteCount
0
LastActivityDate
2011-10-12T04:42:24.167
LastEditDate
LastEditorUserId
0
OwnerUserId
259095
ParentId
0
PostTypeId
1
Score
2
ViewCount
1346
LastEditorDisplayName
text
Body
I'm building an extremely JS-heavy web application. I say it's JS-heavy, because the vast majority of the work going on is done on the client (although there is some syncing back and forth to the server using AJAX and XMPP). This is my first time building something of this scale in pure JS (using jQuery), so I began by organizing my code using MVC in a manner modeled after Rails. For example, if the user clicks a button, a method is called in the Controller object, which pulls some data from the models, and which then passed the data a view function. I do this for pretty much everything, even trivial actions like showing a small popup. After a few months of this, I feel like I'm not taking full advantage of the language. Should I really be rendering my views as if they are webpages? It seems like it'd make more sense to break down the views into components, which would be instances of Javascript objects/functions. For example, instead of... <pre><code>var itemListHTML = '<ul id="item-list"><li>item1</li><li>item2</li></ul>'; jQuery('#container').html(itemListHTML); </code></pre> ...I could instead have... <pre><code>components.itemList.render(); </code></pre> So here, there's just a component called <code>itemList</code>. Since all the data is stored on the client, these components could instantly access all of the data necessary to create and manage themselves. I imagine I would still use MVC, but there'd be no need for controller actions that are responsible for the entire view. If I want to refresh one part of the UI, I just call <code>whateverComponentControlsThatArea.redraw()</code> and it re-renders itself. I'm sure someone had done this before. Is there a name for this style of code organization? Any guides or best-practices for how to implement it?
Tags
<javascript><jquery><model-view-controller><components><code-organization>
Title
Code organization in JavaScript: MVC? Self-rendering components?
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USNudeCanalTroll
plurals
PostLinksPostIdRelatedPostId
1. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
2. PO
 singulars
 PostTypePostTypeId
 PTAnswer
3. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POCode organization in JavaScript: MVC? Self-rendering components?
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 POCode organization in JavaScript: MVC? Self-rendering components?
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.