Javascript MVC, need help with structure/methods? - javascript

I am attempting a single page application. I understand the main concept of how mvc is used to some extent and am using a lightweight framework called backbone.js. My issue however is not with backbone. I actually am having a problem figuring out how to structure my user interface. I have a bar at the top of the page with 4 buttons. Each button opens an instance window within the application. Within Each of these instance windows html, css, javascript will be utilized. Any suggestions on how to structure the core concept of this user interface.
Considerations on my part:
Each window instance has it's own
div with a unique ID (display:
none).
On-load, the application should
already have necessary html, css,
and javascript loaded into dom. The
html should be inside each unique
div pertaining to its instance
window.
Each menu button should modify its divs
display: to block, bringing the
instance window for that button to
front, but hiding all others.
Each instance window has to be
flexible enough to run javascript
within it, so I must be able to
create additional mvc's within each
unique div.
Okay, last comment. Should my user
interface utilize mvc or is
it not neccessary. Also, If it did use mvc
whats the best way to acomplish
this. There many different concepts
with mvc, like creating a view for
each instance window and listening
for clicks. It just gets confusing.
You think any of my considerations will effectively get the job done, and can you offer suggestions?

If I understand correctly, you want to have each button display a popup window, and be able to change the content of each popup window based on some action? I can only speak for how I would use ASP.NET MVC...
I would use jQuery UI Dialog to handle the popup windows, and have a form tag within each popup that uses its own MVC controller using ajax (I prefer the jQuery ajax command). Using ajax rather than a standard submit button allows you to send/receive data to/from the server without refreshing the webpage. You'll need the .serialize to convert your form into the correct format for sending. Each controller action can either return a JsonResult (which gives you back a javascript object you can use) or a PartialView (which gives HTML)...
Hope some of that made sense...
EDIT:
To answer your last point, I would have a model, view and controller for each window... but I am fairly new to the MVC pattern...

Although Sencha's ExtJS may not be for you, they have a very detailed tutorial of how they've structured the framework for MVC.
I'd recommend taking a look at this for some ideas: http://dev.sencha.com/deploy/ext-4.0-beta3/docs/guide/application_architecture.html
Cheers!

Related

How to create a box on click in flask?

I am new to flask.
How can I make it so that, upon a user clicking an image, a centered box containing a form appears in the div (without a page reload).
Is this possible just using javacript?
The answer to this has nothing to do with Flask. As you guess this would be achieved using JavaScript.
As it seems you do not have much knowledge of JavaScript i would suggest you start here : Mozilla Developer Network
Specifically you would need to look into event handlers, e.g. click handlers
You can also utilise a third party wrapper library like JQuery which will make interacting with DOM elements and events slightly simpler whilst your getting started with JavaScript.
These links will get you started or at least give you the knowledge to come back and ask a more directed question.

Durandal technique to refresh an existing page [view/viewmodel]

I've a dashboard page which shows data relevant to a particular user which is shown in the drop-down at the right hand top corner.
When i select a different user the dashboard should be reloaded/refresh with data relevant to that user.
Router does not work since I navigate to the same page it does not reload the page.Another trick would be to create a dummy page & redirect from there back to dashboard,but i'm looking for a cleaner approach.
My Bad.
Durandal is leveraging KO heavily so i only needed to update the ViewModel & GUI would get autorefreshed. But the dropdown is not a durandal module.So was trying to figure out a way to notify the Durandal module with the change event.
I realized i was also using http://www.jstorage.info/ & it had a callback for pub/sub as well as listener :) , Issue resolved :)

Changing html form index when a new form element is added

I am working on an old legacy application which used document.forms[index] approach to access elements in the form and to submit the form. My task is to add a new top panel with few textboxes and buttons. I am using a form for this. This top panel is to be included in all the pages in the application. Now, all the pages stop working since form[index] needs to be updated in all the pages. I know using the form name is the best approach. I have around 1000 places to change. What is the best approach to avoid this problem? I still want to use form for my top panel since I am using spring forms to get the data. Any valuable advice will be appreciated. Thanks.
If you looked up the definition of "unmaintainable", that would be a good example.
One trick might be to leave one set of forms, hidden, with the legacy stuff in them, then make another set, lower in the HTML, that the user sees. Then use some JavaScript to map the data back into the original forms in order to continue to work with the expectations of the legacy code. This keeps everything in the same index-order.

Create Custom control from ajax control toolkit

I have a requirement where I need to show always visible calender. I understand that I can easily use ASP.NET calender, but because of the design of AJAX Control Toolkit calender and easiness of
using it, I am inclining towards creating a custom control out of it which can be visible by default.
For example:
When I load page, I should readily see AJAX calender without being associated to any id.
I have referred some links like
http://dotnetslackers.com/articles/ajax/ASPNETAJAXControlDevelopment.aspx
but I'm still not sure what's the right way to do this.
Any help would be greatly appreciated.

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

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?
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!

Categories