Skip to main content

Development

KnockoutJS MVVM Script Folder Structure

In the past couple of years, we have delivered several projects successfully which were based on MVC + KnockoutJS, they all applied the same structure or pattern, so I was thinking to get them out from several projects which we might reuse in the future projects, here is what I’d like to share, you may adopt it, or question it.

It is important to have a clear and fixed folder structure that makes your codes easy to maintain, more readable, more extendable, and also helps new team members ramp up quickly, makes the project folder structure more stable.

If you are a JavaScript developer, you need to face the Script folder every day, I guess you do not want to see the redundant long JavaScript file list which you never edit after they are included at the beginning of the project, so I suggest that we move them into a folder called “Sys”, now your world looks more clear and you can concentrate on more business logic of JavaScript files.

The collapsed and expanded folder structure looks like below:

– App: all business logic related JavaScript files.

– Common: the global level methods, like settings.js, utils.js

– Models: you may want the models are reusable for different pages, then you can place all [models.js] under Models folder directly, alternately, you can separate models by modules and pages folder, but that depends.

– ViewModels: place all page view models logic JavaScript files, you may reorganize them by different modules or pages subfolder.

– Lib: all custom libraries.

[Collapsed]

1

 

 

 

 

 

[Expanded]

02

Thoughts on “KnockoutJS MVVM Script Folder Structure”

  1. Richard Yang Post author

    The html files (templates) should be separated in another folder which is in the same level of ‘Script’, or you can place them in another folder called Views.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Richard Yang

More from this Author

Follow Us
TwitterLinkedinFacebookYoutubeInstagram