谁给我解答下牛哥这前端js模板引擎是怎么用的?

如图，最代码中每个内容页都是生成了静态页，但是静态页中包含了模板，那我访问该页面的时候没有传值，模板里的数据是哪里来的？？求解答 20牛币送上

由最代码官方编辑于2014-8-13 22:32:06

1个评论

20个牛币 js 模板 mustache

所有回答列表(2)

最代码官方 LV168 2014年8月13日

你这牛币明显是要给我的咯。

这是mustache的模板语法，是属于前端的js模板引擎框架，注意不是后端java层的。

参考下这个前后端整合代码吧：bootstrap+jquery+mustache+springmvc+idworker整合demo代码

另外你截图提到的是用户发表评论后，ajax请求评论接口并返回评论对象，最后通过jquery得到mustache的模板再渲染后得到最终结果append到评论列表的尾部。

相关代码如下：

ajax提交评论js代码片断

01$('.post_comment').click(function() {
02            var post_comment=$(this);
03            var id=$(this).attr("id");
04            var ids=id.split("__");
05            var commentsId=ids[0];
06            var type=ids[1];
07            var source_id=ids[2];
08            var editor=eval("CKEDITOR.instances.editor_"+type+"_"+source_id);
09            if(editor.getData()==""){
10                alert("请输入评论内容");
11                return;
12            }
13            var template = $('#comment_template').html();
14            if ($(this).hasClass('disabled')){
15                return;
16            }
17            post_comment.find("a").text("提交中...").addClass('disabled');
18            $.ajax({
19                url : "/comment/create.htm",
20                type : 'POST',
21                dataType : 'json',
22                data : {
23                    content :  editor.getData(),
24                    type:type,
25                    source_id:source_id
26                },
27                success : function(json) {
28                    if (json.error == "") {
29                        var html = Mustache.to_html(template, json.comment).replace(/^\s*/mg, '');
30                        $("#"+commentsId+" .datas").append(html);
31                        editor.setData("");
32                        post_comment.find("a").text("评论").removeClass('disabled');
33                    } else {
34                        alert(json.error);
35                    }
36                }
37            });
38        });

mustache评论模板js script代码片断

01<script id="comment_template" class="template" type='text/template'>
02        <div class="data row-fluid">
03            <div class="span1">
04                {{#user}}
05                <a class="name" href="/user/{{id}}.htm" rel="nofollow">
06                <img src="{{avatarUrl}}" alt="{{name}}的gravatar头像"/>
07                </a>
08                {{/user}}
09            </div>
10            <div class="span11">
11                <div class="data_title">
12                    {{#user}}<span><a class="name" href="/user/{{id}}.htm" rel="nofollow">{{name}}</a></span>{{/user}}
13                    <span class="time pull-right">{{createTimeExt}}</span>
14                </div>
15                <div id="content_{{id}}"  class="content clear">
16                    {{{content}}}
17                </div>
18            </div>
19        </div>
20    </script>

注意：mustache的模板片断也可以用非script来替换，只要用id标示，jquery可以获取得到即可。但是用script有个优势就是搜索引擎会忽略此段代码，如果模板中正好有锚点，比如：

1<span style="background-color:#FFFF00"><a class="name" href="/user/{{id}}.htm" rel="nofollow">
2                <img src="{{avatarUrl}}" alt="{{name}}的gravatar头像"/>
3                </a></span>

这样对seo是很不利的。

官方demo地址：http://mustache.github.io/#demo

其实诸如前端js模板引擎技术有好多

如：

template
官方参考：http://aui.github.io/artTemplate
BaiduTemplate
官方参考：http://baidufe.github.io/BaiduTemplate
juicer
官方参考：http://juicer.name
doT
官方参考：http://olado.github.io/doT
kissy
官方参考：http://docs.kissyui.com和https://github.com/kissyteam/kissy

最后选用mustache还是觉得简单而且确实强大。

评论(4) 最佳答案

RegExp丶 LV11 2014年8月13日

说明白了的再增加20牛币哈嘿嘿我是土豪我怕谁

最热评论
最新问答