JS模板Handlebars的使用和有效组织

  应用背景

我们在做项目时，为了使页面模块高度复用，使用页面模板是必须的，我想大家通常可能会新建MVC的项目，然后在页面中使用Razor引擎，新建Helper模板类，前后台代码的混写，简洁高效，一切都是那么的行云流水，我就是这么干的！ 直到有一天，当我快做完一个项目时，经理对我说，你不要直接访问数据库，用接口就行了，是啊，说的多轻松，但对程序员来说这就是晴天霹雳啊，因为这意味着你这个项目的流程彻底改变。

                                                                                                   变成

初看起来好像没什么大的问题，砍掉整个后台好像还方便了不少，但还是有些问题，因为接口返回的是json数据，所以会遇到下面的问题:

 

 

即你怎么把json数据传给你的Helper模板？ 看来Razor是不行了，那怎么办呢？ 在js方法中拼凑html字符串，类似

 var html = "<div style='display: inline' id='" + id + "'>" + 
     "<span>" + obj.title + "</span><img onclick="removeregion('" + id + "')" src='../images/delete.gif'>" +
      "</div>";

    这当然可以，但如果页面稍微复杂一些，在各个标签中都有事件，方法，并且方法还要携带相关参数，再加上相应的css样式，业务逻辑之类的，这一大锅混在一起，你觉得你还能这么干吗？

 

 

即使在页面很简单的时候，我也从没考虑过用这种作死的办法来解决问题。难道就没有一种类似Razor的前台的东东，可以使数据、业务逻辑、页面呈现清晰完美的结合在一起吗？答案是肯定的,我们的前辈们早就遇到过这类问题，并且他们已经为我们提供了非常好的解决方案：

 

HandlerBars

 

HandlerBars是一个非常给力的前端语义构建模板，能帮助你快速高效的搭建出自己的页面模型。  

 

简单使用：

 

1.新建MVC项目 

           

   2.下载HandleBars.js.(官网的好像失效了，可以去GitHub下载，或直接NuGet）   

 

 

3.引用

 

 

 

4.建立模板 

                                                            注意type的类型

  5.编译并输出 我们还可以带参数

 

 

 

 

 

 

有效组织：

 

我在学习Handlebars时发现网上的很多教程只是为了写教程而写教程（废话啊），我的意思是说没有更多的从实际开发的角度去帮助大家理解和使用。 就像上面的例子（虽然很水，但能说明问题即可），你可以看到，我的模板、js 、包括之后可能有的css几乎都是写一起的，这在实际的项目开发中是很不可取的，怎样更好的使各个部分相互独立，互不影响，且又能更好的组织和使用呢？ 经过我的大量测试和试验发现了以下三个结论：

 

1.handlebars的模板必须在使用前存在于dom中，即如果你要在一个分部视图中调用模板，那么在你这个分部的视图或它的父级视图中必须存在你要调用的模板。

 

2.在handlebars模板中不能像Razor那样嵌入js。

 

3.模板无法像Razor 那样放在App_Code中直接访问。

 

好了，这里的关键就是怎样更好的组织模板文件呢！针对这三个特点，我们可以在使用时这样组织：

 

1.新建模板文件夹，里面存放handlebars模板（就是一个cshtml文件）。

       

你可以看到，我的一个模板文件里只存了一个模板，当然如果你能保证不冲突的话，你也可以在一个文件中写多个。

 

2.将该模板用到的js,css单独存放于一个文件（这个不用说，大家都知道！）。

 

 

3.在Bundle中一次将你要用到的js,css打入，并在母版页中Render。

 

4.关键就是这一步了，在你要用到模板的页面或父级页面导入你在第1步创建的模板文件

 

然后再在js里引用，编译，输出就像上面那个很水的demo一样。

 

这样我们的模板、js、css就都分开了，层次结构也更清晰，一目了然。

 

以上就是个人在工作学习中的一点经验和见解，和大家分享一下，希望能帮到大家，本人菜鸟一名，若有不对之处，欢迎大家批评指正！