前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >迷你MVVM框架 avalonjs 学习教程13、模板引用

迷你MVVM框架 avalonjs 学习教程13、模板引用

作者头像
全栈程序员站长
发布2022-07-05 09:54:34
4930
发布2022-07-05 09:54:34
举报
文章被收录于专栏:全栈程序员必看

稍为复杂一点的网站都是多个前端工程师合作而成,因此分工是必需的。简单一点的分工就是一个人负责一个频道,某个页面是由一个人全部做的;但如果涉及到一个页面非常复杂,需要多个人同时动工呢?于是到模板的出场时间了。

模板有两种,一种是嵌入到页面内的模板,一种是独立成子页面的模板。这两种avalon都支持。前者通常是使用type为浏览器无法识别的MIME类型的script标签,display:none的textarea标签或noscript标签(0.94后支持,建议使用它)作为模板容器,最近HTML5出了一个新的template标签,大家也不妨用一用。一般情况下,它是用于放置弹出层的内容。另一个模板,则需要通过AJAX请求来加载它们,它们适用范围更广,并且重用性更好。

对于页面内的模板,我们可以使用ms-include=”expr”绑定,对于独立于页面的模板,我们可以使用ms-include-src=”expr”绑定。ms-include要求对应一个ID(换言之,作为模板容器的script等标签必须指定ID),ms-include-src要求对应一个路径。需要注意的是ms-include或ms-include-src的属性值默认都是对应VM的一个属性,当作是一个变量,如果想直接使用字符串,那么需要使用双重引号

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script src="avalon.js"></script>
        <script>
            var model = avalon.define({
                $id: "test",
                content: "引入内部模板",
                name: "司徒正美",
                eee: "lala",
                change: function() {
                    model.eee = model.eee === "lala" ? "hehe" : "lala"
                }
            })
        </script>
    </head>
    <body ms-controller="test">
        <script type="avalon" id="tpl">
            here, {
   { 3 + 6 * 5  }}
        </script>
        <script type="avalon" id="lala">
            <strong>{
   {name}}</strong>!!!
        </script>
        <script type="avalon" id="hehe">
           <em>{
   {content}}</em>!!!
        </script>
        <p>{
   {content}}<button ms-click="change" type="button">切换子模板</button></p>
        <div ms-include="'tpl'"></div><!--注意这里-->
        <div ms-include="eee"></div>
    </body>
</html>

ms-include与ms-include-src的属性值可以添加插值表达式,见下面例子,不过注意需要打开服务器,因为用到AJAX请求。

有四个页面,一个主页面与三个独立的子模板,它们都放在一起,内容分别如下。

include.html

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>ms-include</title>
        <script src="../avalon.js"></script>
        <script>
           var model = avalon.define({
                $id: "test",
                url: "Template1",
                name: "司徒正美",
                password: '12345678',
                array: [1, 2, 3, 4, 5, 6, 7],
                add: function(e) {
                    if (this.value && e.which == 13) {//this为input元素
                        var a = this.value
                        model.array.push(a)
                        this.value = "";
                    }
                }
            })
        </script>
    </head>
    <body>
        <h3 style='text-align: center'>ms-include</h3>
        <div ms-controller="test">
            <select ms-duplex="url">
                <option>Template1</option>
                <option>Template2</option>
                <option>Template3</option>
            </select>
            <div ms-include-src="include{
   {url}}.html"></div>
        </div>
    </body>
</html>

includeTemplate1.html

代码语言:javascript
复制
<h1>这是模板1</h1>
<p>生成于{
   { new Date | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{
   { "2011/07/08" | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{
   { "2011-07-08" | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{
   { "01-10-2000" | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{
   { "07 04,2000" | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{
   { "3 14,2000" | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{
   { 1373021259229 | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>生成于{
   { "1373021259229" | date("yyyy MM dd:HH:mm:ss")}}</p>
<p>值得注意的是,new Date可传的格式类型非常多,但不是所有浏览器都支持这么多,详看<a href="http://dygraphs.com/date-formats.html">这里</a>。</p>

includeTemplate2.html

代码语言:javascript
复制
<script type="avalon" id='form'>
    <p>姓名:<input ms-duplex="name">{
   {name}}</p>
    <p>密码:<input type="password" ms-duplex="password"/>{
   {password}}</p>
</script>
<form ms-include="'form'" style='border:1px solid #666;background:sandybrown;padding:20px'>

</form>

includeTemplate3.html

代码语言:javascript
复制
<ul ms-each-el="array">
    <li >第 {
   {$index+1}} 个元素: {
   {el}} <span ms-click="$remove">点我删除</span></li>
</ul>
<p>添加新元素 ,然后回车<input ms-keypress="add"></p>

如果大家想在模板加载后,加工一下模板,可以使用data-include-loaded来指定回调的名字。

如果大家想在模板扫描后,隐藏loading什么的,可以使用data-include-rendered来指定回调的名字。

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <title>ms-include相关实验</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <script src="avalon.js">
        </script>
        <script>
            avalon.define("test", function(vm) {
                vm.render = function(){
                    console.log("render")
                }
            })

        </script>
    </head>
    <body ms-controller="test" >
        <div ms-include-src="'temp.html'" data-include-rendered='render'></div>
    </body>
</html>

temp.html

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script>
            console.log("----------")
        </script>
    </head>

    <body>
        <div>include content</div>
    </body>
</html>

最后我们看avalon.templateCache,所有ms-include-src加载的模板都会缓存在这里,从而有效地减少请求数。并且这个东西还有一个额外的好处,我们的JS与CSS最终会压缩合并,对于这些模板我们也想把它们合并到JS文件里面,它就有用武之地了。这也是我们在第一节看到的那样,把requirejs加载回来的模板都放在avalon.templateCache里,与ms-include-src一起使用了。

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <title>avalon.templateCache的应用</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>
        <script>
            avalon.templateCache["aaa.html"] = "<strong>dddddddddddd</strong>"
            avalon.templateCache["bbb.html"] = "<em>555555555555</em>"

            var model = avalon.define({
                $id: "test",
                adjust: function(tmpl) {
                    return tmpl +"  "+ (new Date - 0)
                },
                aaa: "aaa.html",
                change: function() {
                    model.aaa = model.aaa === "aaa.html" ? "bbb.html" : "aaa.html"
                }
            })
        </script>
    </head>
    <body ms-controller="test">
        <div ms-include-src="aaa" data-include-loaded="adjust"></div>
        <button type="button" ms-click="change">点我切换模板</button>
    </body>
</html>

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/109716.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021年9月1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档