The use and effective organization of JS template handlebars

Application BackgroundWhen we are doing the project, in order to make the page module highly reusable, the use of page template is necessary, I think you can usually create a new MVC project, and then use the Razor engine in the page, create a new helper template class, the front and back of the Code of the mix, concise and efficient, everything is so flowing, I do! Until one day, when I was about to finish a project, the manager said to me, you do not directly access the database, with the interface on the line, yes, say how easy, but for the programmer this is a bolt from the blue, because it means that the process of your project completely changed.

become

At first glance seems to be no big problem, cut off the entire background seems to be more convenient, but there are some problems, because the interface is returning JSON data, so you will encounter the following question: How do you send JSON data to your helper template? It seems that razor is not, how to do? Piecing together HTML strings in the JS method, like

var html = "<div style= ' display:inline ' id= '" + ID + ">" +      "<span>" + Obj.title + "</span> "+      " </div> ";

This certainly can, but if the page is slightly more complex, there are events in each label, methods, and methods to carry the relevant parameters, coupled with the corresponding CSS style, business logic and so on, this big pot mixed together, you think you can do so? Even when the page was very simple, I never considered using this method of death to solve the problem. Do not have a similar razor of the front-east, can make data, business logic, page rendering a clear and perfect combination of it? The answer is yes, our predecessors have long encountered such problems, and they have provided us with a very good solution: Handlerbars Handlerbars is a very powerful front-end semantic building template that can help you build your page model quickly and efficiently. Simple to use : 1. Create a new MVC project

2. Download Handlebars.js. (The official website seems to be invalid, can go to GitHub to download, or direct nuget)  3. References4. Create a template

Note the types of type

5.Compiling and outputting we can also take parameters Effective Organization :  When I was learning handlebars, I found many tutorials on the web just to write tutorials (nonsense), I mean no more from the actual development point of view to help you understand and use. Just like the example above (although very water, but can explain the problem can), you can see, my template, JS, including the possible after the CSS is almost written together, which is very undesirable in the actual project development, how to better make the various parts of each other independent, non-impact, and can better organize and use it? After a lot of tests and experiments, I found the following three conclusions:  1.handlebars template must exist in the DOM before use, that is, if you want to invoke a template in a partial view, the template you want to invoke must exist in the view of your division or its parent view.  2. JS can not be embedded in the handlebars template like razor.  3. Templates cannot be accessed directly in App_Code like Razor.   Well, the key here is how to better organize template files it! For these three features, we can organize in this way:  1. Create a new template folder with the handlebars template (which is a cshtml file).         You can see that there is only one template in one of my template files, but you can also write multiple in one file if you can guarantee that it doesn't conflict.  2. Js,css The template is stored in a single file (this needless to say, everyone knows!). ）。   3. In the bundle, once you have the js,css you want to use, and render it in the master page.  4. The key is this step, in the template you want to use the page or the parent page to import the template file you created in the 1th step   and then in the JS quote, compile, output is like the above water demo.   So our template, JS, css are separated, the hierarchy is clearer, at a glance.   above is the individual in the work of learning a bit of experience and insight, and everyone to share, I hope to help everyone, I rookie a, if there is not the place, welcome everyone criticize correct!