JTemplate学习（二）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- saved from url=(0043)http://jtemplates.tpython.com/example2.html -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script type="text/javascript" src="Scripts/jTemplates/example/jquery.js"></script>

    <script type="text/javascript" src="Scripts/jTemplates/jquery-jtemplates.js"></script>

    <title>jTemplates</title>

    <script type="text/javascript">

        // data for testing 模板数据

        $(document).ready(function () {

            var data = {

                name: 'User list',

                list_id: 4,

                table: [

					{ id: 1, name: 'Anne', age: 22, mail: '[email protected]' },

					{ id: 2, name: 'Amelie', age: 24, mail: '[email protected]' },

					{ id: 3, name: 'Polly', age: 18, mail: '[email protected]' },

					{ id: 4, name: 'Alice', age: 26, mail: '[email protected]' },

					{ id: 5, name: 'Martha', age: 25, mail: '[email protected]' }

                ]

            };

            // Localize data 模板参数

            var lang = {};

            lang['en'] = {

                'id': 'ID',

                'name': 'Name',

                'mail': 'E-Mail',

                'language': 'english'

            };

            lang['pl'] = {

                'id': 'ID',

                'name': 'Nazwisko',

                'mail': 'Adres e-mail',

                'language': 'polski'

            };

            // attach the template 加载模板

            $(".jTemplatesTest").setTemplateElement("template");

            // set parameter 'lang' 为模板指定参数，调用参数用 $P

            $("#result1").setParam('lang', lang['en']);

            $("#result2").setParam('lang', lang['pl']);

            // process the template 填充数据 调用数据用 $T

            $(".jTemplatesTest").processTemplate(data);

        });

    </script>

    <style type="text/css">

        .jTemplatesTest {

            background: #DDD;

            border: 1px solid #000;

            margin: 2em;

            width: 480px;

        }

            .jTemplatesTest * {

                padding: 4px;

                margin: 2px auto;

            }

            .jTemplatesTest td, tr {

                background: #EEE;

                border: 1px solid black;

            }

    </style>

</head>

<body style="zoom: 1;">

    <!-- Template content -->

    <textarea id="template" style="display: none">

        <div>{$T.name}: {$T.list_id} [{$P.lang.language}]</div>

		<table>

			<thead style="font-weight: bold">

				<tr>

					<td>{$P.lang['name']}</td>

					<td>{$P.lang['mail']}</td>

				</tr>

			</thead>

			<tbody>

				{#foreach $T.table as record}

				<tr>

						<td>{$T.record.name}</td>

						<td>{$T.record.mail}</td>

				</tr>

				{#/for}

			</tbody>

		</table>

	</textarea>

    <!-- Output elements -->

    <div id="result1" class="jTemplatesTest">

    </div>

    <div id="result2" class="jTemplatesTest">

    </div>

</body>

</html>
为模板指定参数