65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Just-Click 库的 Web 模板 - 第一部分

Eng Kerollos Adel
starIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIconemptyStarIcon

1.80/5 (2投票s)

2018年6月3日

CPOL

2分钟阅读

viewsIcon

6238

新的 JavaScript 库，该库可以轻松地从模板、JavaScript 对象、API 或文件显示 HTML 页面，并带有筛选功能。

引言

有很多库可以帮助你使用模板构建应用程序，例如 handlebars，但你需要编写很多行代码才能应用模板。 在本文中，我们将使用一个库创建一个页面。 我们只需要几个简单易懂的步骤，就可以将你的对象连接到你的模板，并将你的对象绑定到你的页面。

为什么使用模板

问题 1：在创建画廊后，如果结构发生任何更新，或者你需要添加一个类，你将不得不对所有元素应用此更改。

问题 2：你需要向元素列表中添加/删除元素。

工具

在本主题中，我们将使用一个 JavaScript 模板库。 它的名字是 ‘Justclick’。 你可以在 这里 找到所有示例和类源代码。

示例

简单的画廊页面包含标题和 6 张图片

gallery image

Using the Code

应用 JustClick 模板之前的简单 HTML 代码

只需将图片添加到我们的页面 - 没有新的代码。

<!DOCTYPE html>
<html>
<head>
    <title>Image Gallery | With No Template</title>
    <link href="css/StyleSheet.css" rel="stylesheet" />
</head>

<body>
    <h1>Image Gallery | With No Template</h1>
    <hr />
    <div>
        <div class="Box">
            Image Name : Image 1
            <br />
            <br />
            <img src="images\img1.jpg" alt="image 1" class="image" />
        </div>
        <div class="Box">
            Image Name : Image 2
            <br />
            <br />
            <img src="images\img2.jpg" alt="image 1" class="image" />
        </div>
        <div class="Box">
            Image Name : Image 3
            <br />
            <br />
            <img src="images\img3.jpg" alt="image 1" class="image" />
        </div>
        <div class="Box">
            Image Name : Image 4
            <br />
            <br />
            <img src="images\img4.jpg" alt="image 1" class="image" />
        </div>
        <div class="Box">
            Image Name : Image 5
            <br />
            <br />
            <img src="images\img5.jpg" alt="image 1" class="image" />
        </div>
        <div class="Box">
            Image Name : Image 6
            <br />
            <br />
            <img src="images\img6.jpg" alt="image 1" class="image" />
        </div>
    </div>

</body>
</html>

示例 1：开始应用简单模板（解决问题 1）

在开始工作之前，我们需要创建我们的对象并将其添加到 src/Objects.js。

1. 创建对象

为每个对象添加一个简单的对象

//----------------------------------------- image gallery example ---------------------------------//
var image1 = {
    caption: "caption 1",
    name: "img1.jpg",
    alt: "image 1"
}
var image2 = {
    caption: "caption 2",
    name: "img2.jpg",
    alt: "image 2"
}
var image3 = {
    caption: "caption 3",
    name: "img3.jpg",
    alt: "image 3"
}
var image4 = {
    caption: "caption 4",
    name: "img4.jpg",
    alt: "image 4"
}
var image5 = {
    caption: "caption 5",
    name: "img5.jpg",
    alt: "image 5"
}
var image6 = {
    caption: "caption 6",
    name: "img6.jpg",
    alt: "image 6"
}
//---------------------------------------- image gallery example ---------------------------------//

2. 创建模板

对象 ID simple-templete 将用于将对象绑定到模板，以使用对象中的属性，需要添加 {{property_Name}}，编译器将在运行时用属性值替换该标签

<script id="simple-templete" type="text/just-click-template">
        <div class="Box">
            Image Name : {{caption}}
            <br />
            <br />
            <img src="images\{{name}}" alt="{{alt}}" class="image" />
        </div>
 </script>

3. 开始使用模板

  1. 在页面头部将添加我们文件夹的链接
  2. 创建对象会将模板添加到它
  3. 创建模板
  4. 使用 Just click 库 justclick.Complie("template-id", "target-html-element", object); 将对象绑定到模板
<!DOCTYPE html>
<html>
<head>
    <title>Image Gallery | Simple Template</title>

    <link href="css/StyleSheet.css" rel="stylesheet" />

    <!-- you need to add scripts in same order -->
    <script src="js/jquery-2.1.4.min.js"></script> <!-- jQuery -->
    <script src="js/moment.js"></script> <!-- just click library depend on this library -->
    <script src="js/JustClick-Templete.js"></script> <!-- just click library -->
    <!-- object is stored here -->
    <script src="src/Objects.js"></script>

</head>
<body>
    <h1>Image Gallery | With Simple Template</h1>
    <hr />

    <div class="main-container">
        <div id="img1-container"></div>
        <div id="img2-container"></div>
        <div id="img3-container"></div>
        <div id="img4-container"></div>
        <div id="img5-container"></div>
        <div id="img6-container"></div>
    </div>


    <script id="simple-templete" type="text/just-click-template">
        <div class="Box">
            Image Name : {{caption}}
            <br />
            <br />
            <img src="images\{{name}}" alt="{{alt}}" class="image" />
        </div>
    </script>

    <script>
        justclick.Complie("simple-templete", "img1-container", image1);
        justclick.Complie("simple-templete", "img2-container", image2);
        justclick.Complie("simple-templete", "img3-container", image3);
        justclick.Complie("simple-templete", "img4-container", image4);
        justclick.Complie("simple-templete", "img5-container", image5);
        justclick.Complie("simple-templete", "img6-container", image6);
    </script>

</body>
</html>

完成此步骤后，我们解决了问题 1，但仍然存在在 HTML 页面中添加或删除元素的问题。

示例 2：使用数组模板（解决问题 2）

1. 创建对象

创建图片对象数组

//----------------------------------------- image gallery array ---------------------------------//
var images = [
        { caption: "caption 1", name: "img1.jpg", alt: "image 1" },
        { caption: "caption 2", name: "img2.jpg", alt: "image 2" },
        { caption: "caption 3", name: "img3.jpg", alt: "image 3" },
        { caption: "caption 4", name: "img4.jpg", alt: "image 4" },
        { caption: "caption 5", name: "img5.jpg", alt: "image 5" },
        { caption: "caption 6", name: "img6.jpg", alt: "image 6" },
];
//----------------------------------------- image gallery array ---------------------------------//

2. 创建模板

{{#each}} 和 {{#end-each}} 将使它们之间的所有元素对列表中的每个元素重复

    <script id="simple-List-Templete" type="text/just-click-template">
        {{#each}}
        <div class="Box">
            Image Name : {{caption}}
            <br />
            <br />
            <img src="images\{{name}}" alt="{{alt}}" class="image" />
        </div>
        {{#end-each}}
    </script>

3. 开始使用模板

与前面的示例一样，唯一的更改是只为所有元素创建一个 div，并通过传递图片数组一次性应用模板

<!DOCTYPE html>
<html>
<head>
    <title>Image Gallery | Simple Template</title>

    <link href="css/StyleSheet.css" rel="stylesheet" />

    <!-- you need to add scripts in same order -->
    <script src="js/jquery-2.1.4.min.js"></script> <!-- jQuery -->
    <script src="js/moment.js"></script> <!-- just click library depend on this library -->
    <script src="js/JustClick-Templete.js"></script> <!-- just click library -->
    <!-- object is stored here -->
    <script src="src/Objects.js"></script>

</head>
<body>
    <h1>Image Gallery | With List Template</h1>
    <hr />
    <div id="main-container">
    </div>

     
    <script id="simple-List-Templete" type="text/just-click-template">
        {{#each}}
        <div class="Box">
            Image Name : {{caption}}
            <br />
            <br />
            <img src="images\{{name}}" alt="{{alt}}" class="image" />
        </div>
        {{#end-each}}
    </script>

    <script>
        justclick.Complie("simple-List-Templete", "main-container", images);
    </script>

</body>
</html>

代码比以前的示例更简单、更清晰，并且更易于维护。

 

示例 3：从复杂对象或 json 文件显示

下面的对象包含多种对象类型，第一个是标题，第二个是图片列表：

1. 从对象

//----------------------------------- image gallery complex array ---------------------------------//
var gallery = {
    title: "Image Gallery | With List Template",
    images: [
        { caption: "caption 1", name: "img1.jpg", alt: "image 1" },
        { caption: "caption 2", name: "img2.jpg", alt: "image 2" },
        { caption: "caption 3", name: "img3.jpg", alt: "image 3" },
        { caption: "caption 4", name: "img4.jpg", alt: "image 4" },
        { caption: "caption 5", name: "img5.jpg", alt: "image 5" },
        { caption: "caption 6", name: "img6.jpg", alt: "image 6" },
    ]
};
//----------------------------------- image gallery complex array ---------------------------------//

从 json 文件

2. 创建模板

  1. jc-date-formate="DD-MMM-YYYY" 添加日期格式
  2. {{@@date}} 使用此命令插入当前日期
  3. {{title}} 使用数组中的第一个元素
  4. {{#each images}} 在 #each 之后添加数组元素名称 images 允许编译器选择循环项
   <script id="list-Templete" type="text/just-click-template" jc-date-formate="DD-MMM-YYYY">
        <h1>{{title}}</h1>
        <h3>Current Date : {{@@date}}</h3>
        <hr />

        {{#each images}}
        <div class="Box">
            Image Name : {{caption}}
            <br />
            <br />
            <img src="images\{{name}}" alt="{{alt}}" class="image" />
        </div>
        {{#end-each}} 
    </script>

3. 完整页面代码

<!DOCTYPE html>
<html>
<head>
    <title>Image Gallery | Simple Template</title>

    <link href="css/StyleSheet.css" rel="stylesheet" />

    <!-- you need to add scripts in same order -->
    <script src="js/jquery-2.1.4.min.js"></script> <!-- jQuery -->
    <script src="js/moment.js"></script> <!-- just click library depend on this library -->
    <script src="js/JustClick-Templete.js"></script> <!-- just click library -->
    <!-- object is stored here -->
    <script src="src/Objects.js"></script>

</head>
<body>
    <div id="main-container">
    </div>

    <script id="list-Templete" 
    type="text/just-click-template" jc-date-formate="DD-MMM-YYYY">
        <h1>{{title}}</h1>
        <h3>Current Date : {{@@date}}</h3>
        <hr />

        {{#each images}}
        <div class="Box">
            Image Name : {{caption}}
            <br />
            <br />
            <img src="images\{{name}}" alt="{{alt}}" class="image" />
        </div>
        {{#end-each}}
    </script>

    <script>
        <!-- in case of object-->
        justclick.Complie("list-Templete", "main-container", gallery);
        <!-- in case of json file--></span></font>
        justclick.ComplieFromURL("list-Templete", 
        "main-container", "src/gallery.json");
    </script>

</body>
</html></span></font>
© . All rights reserved.