substitute

Yahoo! UI Library 3.0がリリースされたのでちょっと使ってみようかな、ということで、まずはsubstitute。これを使うと簡単なテンプレートエンジンを実現できます。サンプルは以下。

// Yahoo! UI Library - substitute を利用して、簡単なテンプレートエンジンを実現するサンプル  
// substituteモジュールを使う指定をして、YUIインスタンスを生成
YUI().use('substitute', function(Y) { 
  // substituteメソッドを呼び出し。
  // 第一引数がテンプレート文字列で、文字列中の{<キー>}が第2引数のオブジェクトの値に置換される。
  var str = Y.substitute( "Hello {yui}{version} {world} !!", {
    yui: "Yahoo! UI Library ",
    version: 3, // 数値もOK
    world: { toString: function() { return "World" } } // オブジェクトが指定された場合、toStringされた値が使用される
  });
  document.getElementById("out").innerHTML = str;
});

• 'substitute'モジュールを使うように構成すると、YUIインスタンス(Y)にテンプレート処理を行うsubstitute関数が追加されます。
• substitute関数は、
  • 第一引数の文字列内の「{<キー>}」を
  • 第二引数のオブジェクトのプロパティ値に置換した文字列を返却します。
• 置換する値には、文字列のほか、数値やオブジェクトも指定可能です。
  • オブジェクトが指定された場合、toStringされた値が使用されます。

実行結果はこちら

置換する値を動的にカスタマイズする

第三引数で関数を指定することで、置換する値を動的にカスタマイズすることが可能です。

• 第三引数を指定すると、「{}」の評価時に関数が実行され、戻り値が置換文字列として使用されるようになります。
• 関数には引数として以下が渡されてくるので、それを参照して動的に結果を変更できます。
  1. テンプレートのキー
  2. 第2引数で指定した値
  3. オプション({}内のスペースより後の値)

YUI().use('substitute', function(Y) { 
  // 第三引数で関数を指定でき、置換文字列を動的にカスタマイズ可能。
  var str = Y.substitute( "{aaa bbb} {ccc ddd} !!", {
    aaa: "A"
  }, function( key, value, option ) {
    // 引数で、テンプレートのキー、第2引数で指定した値、オプション({}内のスペースより後の値)、が渡されてくる。
    return key + "-" + value + "-" +  option;
  } );
  document.getElementById("out").innerHTML = str;
});

実行結果はこちら