Model-View-Controller in JavaScript -

tl; Dr: How does the MVC implement in a clean way in Javascript?

I am trying to implement MVC in JavaScript. I have goggle and reconstructed my code from countless times but I have not found a suitable solution. (The code just "does not look right").

Here's what I'm just saying about it. It's incredibly complex and it's a pain to work with (but I was better than a heap of earlier codes).

And look, glitch, if you are really brave:

  // create a "main model" "var main = Model0 (); function Model0 () {/ / Create an associated view and save its methods in "View" var view = View0 (); // Create a submodel and it is a function // Pass that "Submodel View" model subview "theme model 1 = Model 1 (Subview) {view.subviewify (subview);}); // Return model methods that can be used by // controller (on change handler) Return {'updateModel1': function (newValue) {model1.update (newValue)); }}; } Function Model1 (MESCView) {var info = ''; // Create related view and passed function var view = View1 (); See the original view using // Add. MakeSubView (see .___); // Bring the dirty dirty // model model which can be used by the parent model (and therefore the controller) {{update: return: function (newValue) {info = newValue; // Notify the view of new information view.events.value (info); }}; } Function View 0 () {var thing = document.getElementById ('DIV'); Var input = document.getElementById ('the input'); // This is the "controller", input with me. Exchange = function () {// Ugly, global uses to contact the main model. Updatemodel1 (this.value); }; Return {'events': {}, // adds a subview to this view 'SubViewit': Function (SubView) {thing.appendChild (SubView); }}; } // This is a subview, function view 1 () {var element = document.createElement ('div'); Return {'events': {// When the value changes, it is called // so that the view can be updated to 'value': function (newer) {element.innerHTML = newValue; }}, // .. Understand the DOM presentation of the preview / / so it can be connected to any original view '__view': element}; }  

How does MVC implement in a cleaner manner in JavaScript? How can I improve this system? Or is it a completely wrong way to go, should I follow another pattern?

Installed for at least one javascript and some of the useful MVC frameworks. Probably more I have used JavaScript MVC for browser based and air horizontal and continue to come back - it has problems, but I have made it quite useful.
There are other solutions, a new thing. I have heard about good things. I have not used myself, but I intend to try soon. I do not have enough information to describe it properly, but for me it looks like the front controller, which works on the routes, a templing system and restalable data stores I'm not sure that it is MVC but the same content is.

I have to disagree with it MVC can be slightly different to implement in JavaScript, but its advantage is very important, usually design patterns associated with OO languages ​​do not go out of the window, because JS Class based is not.

I would say that MVC is more suitable for Javascript apps, depending on the request (server side) applications. These objects can hang a page for a while in the Javascript app - minutes or minutes - and having a systematic way of organizing them will have to handle your code more robust and easier.

Post by you Some other point about the code made.

• Visual Objects are responsible for implementing event listeners for DOM elements. This is the work of the controller. The visual justifies HTML - the controller listens for events and works accordingly.
• Your models know your thoughts should have a minimum knowledge of the visual layer in the model layer (perhaps it has been registered as such) to keep your model clean and at this point, I mean business point - Trading logic In the JSP app, you can have a proxy for only a different model model layer but for your sanitary, it is important to keep your model business logic and nothing else. Application logic is a controlling task