学习一下 mustache

mustache-test.js

var data ={
  name: 'yangjunjun',
  age:  '26',
  home: '<strong>禹州</strong>',
  animal:{
    dog: 'XiaoHuang',
    cat: 'XiaoHei'
  },
  color: ['red', 'yellow','gray'],
  hasCar: false
}
// 普通变量
var tpl = "{{name}} is {{age}} years old.";
var output = Mustache.render(tpl, data);
console.log(output);

// html tag 转义
var tpl = "1. {{home}} \n2. {{{home}}} \n3. {{&home}}";
var output = Mustache.render(tpl, data);
console.log(output);

// 值为对象可以用 . 操作符
var tpl = "{{name}} has a dog named as {{animal.dog}} and a cat named as {{animal.cat}}";
var output = Mustache.render(tpl, data);
console.log(output);

// 值为数组可以用 . 来代替每个item
var tpl = "his favourite color is {{#color}}{{.}}, {{/color}}";
var output = Mustache.render(tpl, data);
console.log(output);

/*
  正向判断
   语法：
  {{#value}}
   content
  {{/value}}
   说明：
  如果 value 不存在，或者为 null, undefined, false, 0, NaN, "", [], 这些值的一种，
  里面的内容就不会显示出来，反之就回显示出来
*/
var tpl = "{{name}} is a good gay{{#hasCar}}, and he has a car.{{/hasCar}}";
var output = Mustache.render(tpl, data);
console.log(output);
/*
  反向判断
   语法：
  {{^value}}
   content
  {{/value}}
   说明：
  如果 value 不存在，或者为 null, undefined, false, 0, NaN, "", [], 这些值的一种，
  里面的内容就会显示出来，反之就不回显示出来
*/
var tpl = "{{name}} is a good gay{{^hasCar}}, and he has a car but this is a lie 。{{/hasCar}}";
var output = Mustache.render(tpl, data);
console.log(output);

/*
  这个自己悟吧
*/
var data = {
  "beatles": [
    { "firstName": "John", "lastName": "Lennon" },
    { "firstName": "Paul", "lastName": "McCartney" },
    { "firstName": "George", "lastName": "Harrison" },
    { "firstName": "Ringo", "lastName": "Starr" }
  ],
  "name": function () {
    return this.firstName + " " + this.lastName + ",";
  }
}
var tpl = "{{#beatles}} - {{/beatles}}";
var output = Mustache.render(tpl, data);
console.log(output);

var tpl = "{{#beatles}} {{firstName}} {{lastName}}, {{/beatles}}";
var output = Mustache.render(tpl, data);
console.log(output);

var tpl = "{{#beatles}} {{name}} {{/beatles}}";
var output = Mustache.render(tpl, data);
console.log(output);

/*
  这个自己悟吧
*/

var data = {
  "name": "Tater",
  "bold": function () {
    return function (text, render) {
      return "<b>" + render(text) + "</b>";
    }
  }
}
var tpl = "{{#bold}}Hi {{name}}.{{/bold}}";
var output = Mustache.render(tpl, data);
console.log(output);


/*
  注释
*/
var tpl = "<h1>Today {{name}} and {{!name}}.</h1>";
var output = Mustache.render(tpl, data);
console.log(output);

/*
  partial 拆分部分 {{>partials}}
*/
var data ={
  name: 'yangjunjun',
  age:  '26',
  home: '<strong>禹州</strong>',
  animal:{
    dog: 'XiaoHuang',
    cat: 'XiaoHei'
  },
  color: ['red', 'yellow','gray'],
  hasCar: false
}
var tpl = "I'm {{name}}, and my age is {{age}}, {{>addon}}";
var partialTpl = {
  addon: "my home is {{{home}}}."
};
var output = Mustache.render(tpl, data, partialTpl);
console.log(output);