当前位置：网站首页>Art template template engine

Art template template engine

2022-04-23 09:59:00 【MyDreamingCode】

One 、 brief introduction

explain ： Because it is written manually in the form of string DOM Elements , More trouble , So reference the template .

There are two things in total ：1. data   2. Templates     ps： Plus one. js file

template-web.js ： Provide template function Parameter is id, data

Be careful ： When creating a template , Use another script label ,type="text/html"：

1. introduce js file 

<script src="jquery.js"></script>
<script src="template-web.js"></script>

2. Provide data 

<script>
    var data = {
        name:'zhangsan',
        age:18,
        hobby:[
            ' football ',
            ' Basketball ',
            ' manual '
        ]
    }
</script>

 3. Provide templates 

<script type="text/html" id="content-template">
    <p> My name is {
   {name}}</p>
    <p> This year, {
   {age}} year </p>
    <p>{
   {if age >= 18}} You can go online {
   {else if age < 18}} No internet access {
   {/if}}</p>
    <p> My hobby is ：</p>
    <ul>
        {
   {each hobby}}
        <li>{
   {$index}}：{
   {$value}}</li>
        {
   {/each}}
    </ul>
    {
   {@text}}
</script>

Two 、 Complete code 

<!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.0">
    <title>Document</title>
</head>
<body>
    <div id="content"></div>
    <script src="jquery.js"></script>
    <script src="template-web.js"></script>
    <script type="text/html" id="content-template">
        <p> My name is {
   {name}}</p>
        <p> This year, {
   {age}} year </p>
        <p>{
   {if age >= 18}} You can go online {
   {else if age < 18}} No internet access {
   {/if}}</p>
        <p> My hobby is ：</p>
        <ul>
            {
   {each hobby}}
            <li>{
   {$index}}：{
   {$value}}</li>
            {
   {/each}}
        </ul>
        {
   {@text}}
        <div> Registration time ：{
   {time|dateFormat}}</div>
    </script>
    <script>
        var data = {
            name:'zhangsan',
            age:18,
            hobby:[
                ' football ',
                ' Basketball ',
                ' manual '
            ],
            text:'<a href="javascript:;">Happy</a>',
            time:new Date()
        }
        template.defaults.imports.dateFormat = function(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            return y + '-' + m + '-' + d;
        }
        var htmlStr = template("content-template",data);
        $("#content").html(htmlStr);
    </script>
</body>
</html>

版权声明
本文为[MyDreamingCode]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204230951034616.html

边栏推荐

猜你喜欢

随机推荐