jQuery x mustache メモ - Playground of ours

mustache

Minimal templating with {{mustaches}} in JavaScript

jquery.mustache.jsを作る

% git clone https://github.com/janl/mustache.js.git
% cd mustache.js/mustache-jquery/
% ls
jquery.mustache.js.tpl.post jquery.mustache.js.tpl.pre
% cat jquery.mustache.js.tpl.pre > jquery.mustache.js
% cat ../mustache.js >> jquery.mustache.js
% cat jquery.mustache.js.tpl.post >> jquery.mustache.js

Hello, World!

$.mustache()にテンプレートとデータを渡す。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  <script type="text/javascript" src="jquery.mustache.js"></script>
</head>
<body>
  <div id="target1">Hello, {{who}}!</div>
  <div id="target2"></div>

<script>
  var view = {
    who: 'world',
    say_hello: function() {
      return 'Hello, ' + this.who;
    }
  };

  var template1 = $('#target1').html();
  $('#target1').html($.mustache(template1, view));

  var template2 = '<div>{{say_hello}}!</div>';
  $('#target2').html($.mustache(template2, view));
</script>

</body>
</html>

条件

{{#foo}} {{/foo}}で囲まれた箇所はビューのメソッドfoo()がtrueの場合にレンダリングされる。

<div id="target">
  {{#condition}}
    condition is {{result}}
  {{/condition}}
</div>

<script>
  var view = {
    result: true,
    condition: function() {
      return this.result;
    }
  };

  var template = $('#target').html();
  $('#target').html($.mustache(template, view));
</script>

foo()がfalseの時にレンダリングさせたい場合には、'#'の代わりに'^'を使う。

<div id="target">
  {{^condition}}
    condition is {{result}}
  {{/condition}}
</div>

<script>
  var view = {
    result: false,
    condition: function() {
      return this.result;
    }
  };

  var template = $('#target').html();
  $('#target').html($.mustache(template, view));
</script>

ループ

条件と同じように{{#foo}~{{/foo}}で囲む。ビューのfooが配列の場合にmustacheがループとして処理してくれる。ループ内では、{{.}}を使って現在のアイテムにアクセスできる。

<div id="target">
  {{#items}}
    {{.}}<br />
  {{/items}}
</div>

<script>
  var view = {
    items: ['Twinkle', 'twinkle', 'little bat!']
  };

  var template = $('#target').html();
  $('#target').html($.mustache(template, view));
</script>

'.'でアクセスするアイテムに名前をつけたい場合には'{{%IMPLICIT-ITERATOR iterator=NAME}}'を使う。

<div id="target">
  {{%IMPLICIT-ITERATOR iterator=item}}
  {{#items}}
    {{item}}<br />
  {{/items}}
</div>

<script>
  var view = {
    items: ['Twinkle', 'twinkle', 'little bat!']
  };

  var template = $('#target').html();
  $('#target').html($.mustache(template, view));
</script>

ビューのネスト

<div id="target">
  {{#plot}}
    <h1>{{title}}</h1>
    {{#lines}}
      <p><span>{{role}}</span>:<span>{{part}}</span></p>
    {{/lines}}
  {{/plot}}
</div>

<script>
  var view = {
    plot: {
      title: 'Alice',
      lines: [
        {
          role: 'Alice',
          part: 'What is the use of a book, without pictures or conversations?'
        },
        {
          role: 'Rabbit',
          part: 'Oh my ears and whiskers, how late it\'s getting!'
        },
        {
          role: 'Alice',
          part: 'Curiouser and curiouser!'
        }
      ]
    }
  };

  var template = $('#target').html();
  $('#target').html($.mustache(template, view));
</script>

<div id="target">
  <h1>Alice</h1>
  <p><span>Alice</span>:<span>What is the use of a book, without pictures or conversations?</span></p>
  <p><span>Rabbit</span>:<span>Oh my ears and whiskers, how late it's getting!</span></p>
  <p><span>Alice</span>:<span>Curiouser and curiouser!</span></p>
</div>