zoukankan      html  css  js  c++  java
  • Mustache.js使用笔记(内容属于转载总结)

    1、Mustache的语法很简单,用两个大括号标记要绑定的字段即可,“{{}}”
    Mustache主要的渲染方法为Mustache.render(),该方法有两个参数,第一个为要渲染的模版,
    也就是例子中的template,第二个就是数据源也就是例子中的user对象
    例:

    $(function () {
    var user = { name: "Olive", age: 23, sex: "girl" };
    var template = "My name is {{name}} ,I'm {{age}} ,Sex is {{sex}}";
    var view = Mustache.render(template, user);
    $("#user_info").html(view);
    })


    2、view最终的结果是My name is Olive ,I'm 23 ,Sex is girl;
    3、对象数组循环渲染展示

    var users = { result: [
    { name: "Only", age: 24, sex: "boy" },
    { name: "for", age: 24, sex: "boy" },
    { name: "Olive", age: 23, sex: "girl" }
    ]};
    var template = "<div><table cellpadding=0 cellspacing=0 class='tb' ><tr><td>Name</td><td>Age</td><td>Sex</td></tr>{{#result}}<tr><td>{{name}}</td><td>{{age}}</td><td>{{sex}}</td></tr>{{/result}}</table><div>";
    var views = Mustache.render(template, users);
    $("#users_info").html(views);


    (1)对于对象数据Mustache也有其特殊的语法:{{#}}{{/}},如果所给定的数据源是一个对象数组,
    则可以使用该语法,很方便的用来循环展示。
    {{#}}{{/}}还有另外的一层意思就是判断是否为空,如果{{#}}中的值为null或false或undefined则其标记内的内容不展现。
    有了判空的方法当然还有与之相反的方法{{^}},该方法表示的意思与{{#}}意思相反。
    (2) 其中{{#}}标记表示从该标记以后的内容全部都要循环展示
    {{/}}标记表示循环结束。这种情况多用于table行的展示。
    注:在某些时候,我们要绑定的数据源中可能会有一些html标记,如果单纯的采用{{}}这种方式来绑定的话,默认的会将html标记转义。
    为了解决防止绑定字段中的内容被转移我们可以这样做{{&}},这样就可以防止转义。

    参考网址:http://blog.csdn.net/xuemoyao/article/details/17896203

  • 相关阅读:
    Python系列:5- Day1
    Python系列:4-计算机中的进制和编码
    操作系统随笔:什么是微内核和宏内核?【华为鸿鹄操作系统-微内核】
    Python系列:3-操作系统简史
    Python系列:2-电脑结构和CPU、内存、硬盘三者之间的关系
    数据结构中头结点和头指针那么易混淆吗
    pareto最优解(多目标智能算法要用到)
    Matlab学习中遇到的不熟悉的函数(智能算法学习第一天)
    6-2
    6-1
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/5834021.html
Copyright © 2011-2022 走看看