基本的にjsonデータをテンプレート化する単純なjQueryプラグインに取り組んでいます。データを表示する場所の html テンプレート URL、データ URL、およびターゲットを指定できます。私が抱えている問題は、これを行うときです：
var regex = new RegExp( '[['+ key +']]', 'g' );
tplHTML = tplHTML.replace( regex, this[key] );
グローバルフラグに従うのではなく、最初に見つかったケースを置き換えるだけです。
プラグインが呼び出され、データが表示されるページは次のとおりです。
<!DOCTYPE html>
<head>
<title></title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600' rel='stylesheet' type='text/css'>
<style>
* { font-family: 'Open Sans', sans-serif; color: #666; font-weight: 100; line-height: 150%; font-size: 1.0em; }
.container { width: 960px; margin: 0 auto; padding: 10px; border: 1px solid #ccc; }
.left { width: 460px; float: left; }
.right { width: 400px; float: right; }
td, th { text-align: left; vertical-align: top; border: 1px solid #f5f5f5; padding: 10px; font-size: .8em; }
.clear { clear: both; }
</style>
</head>
<body>
<div class="container">
<div class="left">
<table id="users">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</table>
</div>
<div class="right">
<table id="comments">
<tr>
<th>ID</th>
<th>User id</th>
<th>Comment</th>
<th>Date</th>
</tr>
</table>
</div>
<div class="clear"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/userData.js"></script>
<script src="js/templatize.ajax.js"></script>
<script>
$('#users').templatize({
itemsURL: 'process/ajaxUsers.php?l=5&order=ASC',
tplURL: 'tpl/usersTpl.php',
targetHTML: '#users'
});
$('#comments').templatize({
itemsURL: 'process/ajaxComments.php?l=5&order=ASC',
tplURL: 'tpl/commentTpl.php',
targetHTML: '#comments'
});
</script>
</body>
</html>
プラグインコードは次のとおりです。
( function ( $ ) {
$.fn.templatize = function( options ) {
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Configuration Settings %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
var config = $.extend({
debugging : false,
targetHTML : '.container',
output : '',
tplURL : '',
itemsURL : '',
tpl : '',
items : ''
}, options );
init();
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Initialize & Retrieve Data Objects %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
function init() {
var tpl, itemsObj;
$.ajax({
type: "GET",
url: config.tplURL,
data: 'json',
async: false,
success: function( info ) {
tpl = info;
}
});
$.ajax({
type: "GET",
url: config.itemsURL,
data: 'json',
async: false,
success: function( items ) {
itemsObj = items;
}
});
config.tpl = tpl;
config.items = itemsObj;
templatize();
}
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%% Receive Data & Replace tags for template %%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
function templatize() {
var tplHTML = '';
var i = jQuery.parseJSON( config.items );
if( config.debugging ) {
console.log( i );
}
$( i ).each( function() {
tplHTML = config.tpl;
for (var key in this) {
//tplHTML = tplHTML.replace('[['+ key +']]', this[key]);
var regex = new RegExp( '[['+ key +']]', 'g' );
tplHTML = tplHTML.replace( regex, this[key] );
}
config.output += tplHTML;
});
$( config.targetHTML ).append( config.output );
if( config.debugging ) {
console.log( 'Target for data placement: '+ config.targetHTML );
}
}
};
}) ( jQuery );
最後に、テンプレート コードを次に示します。
<tr><td>[[id]]</td><td><a href="user.php?id=[[id]]">[[name]]</a></td><td>[[email]]</td><td>[[phone]]</td></tr>
smarty タグと同様のタグ付け構造形式を使用しています。私はこれについてしばらく頭を悩ませ、さまざまなドキュメントを調査してきましたが、私に合った解決策は見つかりませんでした。どんな助けでも大歓迎です！
全体として、javascripts .replace() メソッドを取得して、一致の最初のインスタンスだけでなくすべてのインスタンスを置き換える方法を理解する必要があります。私は .replace(search, replacement, flags) である Firefox とのみ互換性があると思われるバージョンを試しました。
ありがとう