templating - Way to organize client-side templates into individual files? -


i'm using handlebars.js, , templates live inside script tags live inside .html files housing dozens of other templates, inside script tags.

<script type="text/template" id="template-1">   <div>{{variable}}</div> </script>  <script type="text/template" id="template-2">   <div>{{variable}}</div> </script>  <script type="text/template" id="template-3">   <div>{{variable}}</div> </script>  ... 

then include file on server-side partial.

this has following disadvantages:

  1. a bunch of templates crammed html files.
  2. finding given template tedious.

i'm looking better way organize templates. i'd each each template live in own file. example:

/public/views/my_controller/my_action/some_template.html /public/views/my_controller/my_action/some_other_template.html /public/views/my_controller/my_other_action/another_template.html /public/views/my_controller/my_other_action/yet_another_template.html /public/views/shared/my_shared_template.html 

then @ top of view, in backend code, can include these templates when page loads, this:

sometemplatelibrary.require(     "/public/views/my_controller/my_action/*",     "/public/views/shared/my_shared_template.html" ) 

this include templates in /public/views/my_controller/my_action/ , include /public/views/shared/my_shared_template.html.

my question: there libraries out there provide or similar functionality? or, have alternative organizational suggestions?

requirejs library amd style dependency management. can use 'text' plugin of requirejs load template file in ui component. once template attached dom, may use mvvm, mvc library bindings or use jquery events logic.

i'm author of boilerplatejs. boilerplatejs reference architecture uses requirejs dependency management. provides reference implementations show how self contained ui components should created. self contained in sense handle own view template, code behind, css, localization files, etc.

files in boilerplatejs ui component

there more information available on boilerplatejs homepage, under "ui components".

http://boilerplatejs.org/


Comments

Popular posts from this blog

java - Play! framework 2.0: How to display multiple image? -

gmail - Is there any documentation for read-only access to the Google Contacts API? -

php - Controller/JToolBar not working in Joomla 2.5 -