JAvascriptテンプレートプラグインamaze.js
3131 ワード
要約:
最近プロジェクトを開発する時、非同期インタフェースはフロントエンドのレンダリングデータを必要として、jsのつなぎ合わせはあまりにも低級で、必ずテンプレートプラグインを使います.これまでjQueryベースやjuicerなどのプラグインを使っていたが、今後の会社のプロジェクト上の統一、モバイル側とpc側の統一、メンテナンス性を考慮してテンプレートプラグインamazeを独自に開発した.js.
IE 5+、chromeなどのストリームブラウザをサポートし、forとif構文をサポートし、式をサポートします.
コード:https://github.com/baixuexiyang/amaze
例:
注意:
1、テンプレートのtypeは'text/amaze'でなければなりません.
2、テンプレートはjQueryで取得できます.例えばamaze.template($('#temp'))
最近プロジェクトを開発する時、非同期インタフェースはフロントエンドのレンダリングデータを必要として、jsのつなぎ合わせはあまりにも低級で、必ずテンプレートプラグインを使います.これまでjQueryベースやjuicerなどのプラグインを使っていたが、今後の会社のプロジェクト上の統一、モバイル側とpc側の統一、メンテナンス性を考慮してテンプレートプラグインamazeを独自に開発した.js.
IE 5+、chromeなどのストリームブラウザをサポートし、forとif構文をサポートし、式をサポートします.
コード:https://github.com/baixuexiyang/amaze
例:
<script src="../src/amaze.js"></script>
<div id="demo"></div>
<script id="test" type="text/amaze">
<div> :{{ amaze.name }}</div>
<div> :{{ amaze.sex===1 ? ' ': ' ' }}</div>
<div> :{{ 12/4 }}</div>
<ul>
{{@ for(var i = 0, _l = amaze.contact.length; i < _l; i++){ }}
{{@ if(amaze.contact[i].name === ' ') { }}
<li>
<span> :{{ amaze.contact[i].name + ' ' }}</span>
<span> :{{ amaze.contact[i].sex===1 ? ' ': ' ' }}</span>
</li>
{{@ } else { }}
<li>
<span> :{{ amaze.contact[i].name }}</span>
<span> :{{ amaze.contact[i].sex===1 ? ' ': ' ' }}</span>
</li>
{{@ } }}
{{@ } }}
</ul>
</script>
<script>
var data = {
name: ' ',
sex: 1,
contact: [{name: ' ', sex: 1},
{name: ' ', sex: 2}]
};
var temp = document.getElementById('test');
amaze.template(temp).render(data, function(html){
document.getElementById('demo').innerHTML = html;
});
</script>
注意:
1、テンプレートのtypeは'text/amaze'でなければなりません.
2、テンプレートはjQueryで取得できます.例えばamaze.template($('#temp'))