โครงสร้างของไฟล์
- tpng.js- jsDemo.php
------ view/tpl_template.html
[ HTML template ]
<h3>{blog_heading}</h3>
<table class="table table-bordered">
<tr>
<th>ID</th>
<th>Label</th>
</tr>
{blog_entries}
<tr>
<td>{id}</td>
<td>{title}</td>
</tr>
{/blog_entries}
</table>
[ PHP main page ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>ทดสอบ JavaScript Template Engine</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<h1>ทดสอบการใช้งาน JavaScript Template Engine!</h1>
<div id="content"></div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<?php
$data = array(
array('id' => '1','title' => 'วัดพระแก้ว','detail' => 'ตัวเมืองเชียงราย'),
array('id' => '2','title' => ' ร้านกาแฟ Singha Park Café ','detail' => 'มหาวิทยาลัยแม่ฟ้าหลวง'),
array('id' => '3','title' => 'จุดชมวิว 360 องศา @วัดดอยกองข้าว','detail' => 'บ้านฮ่องอ้อ ตำบลดอยฮาง อำเภอเมืองเชียงราย'),
array('id' => '4','title' => 'ล่องแพ หนองบัวหลวง','detail' => 'เส้นทางเชียงราย - แม่จัน – เชียงแสน'),
array('id' => '5','title' => 'บ้านกะเหรี่ยงรวมมิตร..','detail' => 'ตำบลแม่ยาว ระยางทางประมาณ 7 กม'),
array('id' => '6','title' => 'พิพิธภัณฑ์ลื้อลายคำ','detail' => 'บ้านศรีดอนชัย อ.เชียงของ จ.เชียงราย '),
array('id' => '7','title' => 'ถนนคนเดินเชียงราย','detail' => 'อยู่ใจกลางเมืองเชียงราย')
);
?>
<script src="tpng.js"></script>
<script>
jsTPNG.tp_data = {
"blog_heading": "ทดสอบสร้างตาราง",
"blog_entries": <?php echo json_encode($data);?>
};
jsTPNG.loadView('tpl_test.html');
jsTPNG.render('#content');
</script>
</body>
</html>
[ tpng.js ]
/*
* -- Songchai @ June 2016
* -- สำหรับเขียนแยกการทำงานระหว่าง PHP กับ HTML
* -- PHP ใช้รับส่งข้อมูล ส่วนการแสดงผล ยกให้ JavaScript
*/
var jsTPNG = {
tp_data : '',
tpl_content : '',
view_directory : 'view/',
loadView : function(file_name) {
var tpl_view;
$.ajax({
type: "GET",
url: this.view_directory + file_name,
dataType: "text",
async : false, //synchronous requests
success : function(data){tpl_view = data;}
});
this.tpl_content = tpl_view;
},
/*** Matching & Replace ***/
matchArray : function(text, xDataArray, mKey) {
var str = text;
var regex = /{(.+?)}/g;
$.each( xDataArray, function( key, value ){
if(mKey){
str = str.replace("{"+ mKey +"}", "").replace("{/"+ mKey +"}", "");
}
if(typeof value == 'object'){
text += jsTPNG.matchArray(str, value);
}else{
text = str.replace(regex, function($0, $1){return xDataArray[$1];});
}
});
return text;
},
render : function(target_elm) {
var x_data = jsTPNG.tp_data;
if(x_data == undefined){
alert('จะต้องส่งข้อมูลอาร์เรย์แบบ JSON เข้ามาในฟังก์ชั่น render() ด้วยครับ');
console.log('jsTPNG.tp_data = JSON_DATS');
return;
}
var result = this.tpl_content;
$.each( x_data, function( key, value ) {
if($.isArray(value)){
var patt = '/{'+key+'}([\\S\\s]*){\\/'+key+'}/g';// key
var patt = eval(patt);
var text_array = result.match(patt);//array
if(text_array != null){
var textList = jsTPNG.matchArray(text_array[0], value, key);
textList = textList.replace(text_array[0], '');
result = result.replace(text_array[0], textList);
}
}else{
result = result.replace(eval('/{' + key + '}/g'), value);
}
});
if(target_elm != undefined){
$(target_elm).html(result);
}else{
return result;
}
}
}
ความคิดเห็น
แสดงความคิดเห็น