精华内容
下载资源
问答
  • Mustache

    2021-03-09 21:16:00
    mustache语法,不仅可以直接写变量,也可以写简单的表达式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

    可以通过Mustache语法(也就是双大括号),将data中的文本数据,插入到HTML

    mustache语法,不仅可以直接写变量,也可以写简单的表达式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
           <h2>{{message}}</h2>
           <h2>{{message}},what's your name</h2>
           <!--表达式 -->
           <h2>{{firstName + lastName}}</h2>
           <h2>{{firstName + ' ' + lastName}}</h2>
           <h2>{{firstName}} {{lastName}}</h2>
           <h2>{{counter * 2}}</h2>
        </div>
        <script  src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    message: 'hello',
                    firstName: 'start',
                    lastName: 'write',
                    counter: 80
                }
            }) 
        </script>
    </body>
    </html>
    
    展开全文
  • mustache

    2019-01-15 14:51:25
    Mustache 是一款经典的前端模板引擎,在前后端分离的技术架构下面,前端模板引擎是一种可以被考虑的技术选型,随着重型框架(AngularJS、ReactJS、Vue)的流行,前端的模板技术已经成为了某种形式上的标配,Mustache...

    Mustache 是一款经典的前端模板引擎,在前后端分离的技术架构下面,前端模板引擎是一种可以被考虑的技术选型,随着重型框架(AngularJS、ReactJS、Vue)的流行,前端的模板技术已经成为了某种形式上的标配,Mustache 的价值在于其稳定和经典:
    主页:https://github.com/janl/mustache.js/
    文档:https://mustache.github.io/mustache.5.html

    Mustache 在使用的时候,会在页面上出现 {{person}} 这样的标签,载入的时候回显示出来,然后立即被替换掉,这个对于页面的呈现是不够友好的,这是我在使用的过程中遇到的一个痛点。

    Mustache 功能非常经典,这里就能全部罗列出来:

    变量

    {{person}}

    带有HTML的变量

    {{{person}}}

    循环

    {{#persons}}
    ......
    {{/persons}}

    数组循环的时候可以用.作为下标
    { "musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"] }
    {{#musketeers}}
    {{.}}
    {{/musketeers}}

    对象

    正常使用:
    { "name": { "first": "Michael", "last": "Jackson" }, "age": "RIP" }
    {{name.first}} {{name.last}}
    {{age}}

    循环使用:
    { "stooges": [ { "name": "Moe" }, { "name": "Larry" }, { "name": "Curly" } ] }
    {{#stooges}}
    {{name}}
    {{/stooges}}

    if else

    {{#person}}
    ......
    {{/person}}
    {{^person}}
    ......
    {{/person}}

    布尔判断

    和前面循环的语法是一样的,取决于变量是否是一个数组
    {{#person}}
    ......
    {{/person}}

    数组的布尔判断

    当一个数组没有任何值的时候,可能会希望不做任何的显示,所以需要这个判断
    {{#persons.length}}
    ......
    {{/persons.length}}

    Lambdas

    遇到和前面的循环和布尔表达式一样,取决于参数的类型
    {{#person}}
    {{name}} is awesome.
    {{/person}}

    { "name": "Willy", "person": function() { return function(text, render) { return "<b>" + render(text) + "</b>" } } }

    输出
    <b>Willy is awesome.</b>

    注释

    这玩意儿有啥用呢?
    {{! ignore me }}

    Trick

    在做<tr></tr>的循环输出的时候,需要使用类似这样的形式(感觉这就是BUG啊,或者是HTML标准的问题?):
    ``
    <tr> <td>{{name}}</td> <td>{{age}}</td> </tr>

    两个核心方法

    Mustache.parse(template);
    Mustache.render(template, obj);

    因为动态载入到 HTML 上的事件或者元素会丢失,所以我封装了一个对模板的缓存:

    $(templateKey).each(function(i){
        templateExist = false;
        $(templateArray).each(function(index){
            if (templateArray[index][0] == templateKey+i)
            {
                templateExist = true;
                template = templateArray[index][1];
            }
         })
    
    <span class="hljs-keyword">if</span> (templateExist != <span class="hljs-literal">true</span>)
    {
        template = $(<span class="hljs-keyword">this</span>).html();
        templateArray.push([templateKey+i, template]);
    }
    
    Mustache.parse(template);
    $(<span class="hljs-keyword">this</span>).html(Mustache.render(template, item.data)).show();
    <span class="hljs-keyword">if</span> (callbackFunction)
    {
        callbackFunction(item.data);
    };
    

    })


    顺便简单学习了一下 Handlebars,这款也非常的知名,并且是基于 Mustache 的模板引擎:
    Handlebars:http://handlebarsjs.com/

    如果你希望像传统模板引擎一样可以有函数和参数处理等等的功能,那么 Mustache 就不是好的选择,但是再复杂了往上走的话,就不如选用 Vue 了

          </div>
    
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,857
精华内容 1,942
关键字:

mustache