beebole/pure.jsで動的にhtmlを表示する方法

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

pure.jsとは

json形式のデータを使って、ページの一部分を自動生成するテンプレートエンジンです。

使用例

たとえば↓のようなチュートリアル通りにHTMLを用意すると、

index.html

<script src="http://pure.github.io/pure/libs/pure.js"></script>

<!-- HTML template -->
<ul>
<li>
  <span></span>
</li>
</ul>

<script>
var data = {
  animals:[
    {name: 'mouse'},
    {name: 'cat'},
    {name: 'bird'},
  ]
};
var directive = {
  'li':{
    'animal<-animals':{
      'span': 'animal.name'
    }
  }
};
$p( 'ul' ).render( data, directive );
</script>

下のような形式で出力されます。

<ul>
  <li><span>mouse</span></li>
  <li><span>cat</span></li>
  <li><span>bird</span></li>
</ul>

※スクリプトの説明
data：表示したいデータ
directive：dataとhtmlの対応
$p( ‘ul’ ).render( data, directive )：表示処理

問題点

htmlを生成するときは
$p( ‘ul’ ).render( data, directive );
を実行するのですが、何回も実行してしまうと表示がおかしなことになってしまいます。

<script src="http://pure.github.io/pure/libs/pure.js"></script>

<ul>
<li>
  <span></span>
</li>
</ul>

<a href="javascript:addFox();">キツネを追加する</a>

<script>
var data = {
  animals:[
    {name: 'mouse'},
    {name: 'cat'},
    {name: 'bird'}
  ]
};
var directive = {
  'li':{
    'animal<-animals':{
      'span': 'animal.name'
    }
  }
};
$p( 'ul' ).render( data, directive );

function addFox(){
  data.animals.push({name: 'fox'});
  $p( 'ul' ).render( data, directive );
}
</script>

初期表示↓

「キツネを追加する」をクリックすると↓

このように大量に表示されてしまいます。

対処方法

これを防ぐためにはdirectiveに対して以下の１処理（コンパイル）が必要になります。

var compiled = $p( 'ul' ).compile( directive );

このコンパイルされた値を使ってレンダリングすることで大量に表示されてしまうのを防ぎます。
以下が修正後のスクリプトです。

<script>
var data = {
  animals:[
    {name: 'mouse'},
    {name: 'cat'},
    {name: 'bird'}
  ]
};
var directive = {
  'li':{
    'animal<-animals':{
      'span': 'animal.name'
    }
  }
};
var compiled = $p( 'ul' ).compile( directive );
$p( 'ul' ).render( data, compiled );

function addFox(){
  data.animals.push({name: 'fox'});
  $p( 'ul' ).render( data, compiled );
}
</script>

では、「キツネを追加する」をクリックしてみます。

はい、ちゃんとfoxが一つだけ追加されましたね。

感想

pure.jsは完成されたhtmlに埋め込みやすくなっているので割と便利です。
細かい処理にも融通が利くので割と好きです。
pureって名前もいいと思います。

参考

https://beebole.com/pure/