avalon中的模板绑定（ms-include）

最新推荐文章于 2018-08-23 13:59:03 发布

liu__software

最新推荐文章于 2018-08-23 13:59:03 发布

阅读量1k

点赞数 1

分类专栏： Avalon 文章标签： javascript web前端

Avalon 专栏收录该内容

1 篇文章

订阅专栏

本文介绍 Avalon 框架中模板的两种引入方式：内部模板和外部模板。内部模板通过页面内的脚本标签定义，外部模板则通过 AJAX 请求加载。文中详细解释了 ms-include 和 ms-include-src 的用法，并提供了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

avalon中的模板引入分为 内部模板 和 外部模板

1.内部模板

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
     <meta charset="UTF-8">  
     <title></title>  
     <style>  
         .ms-controller,.ms-important,[ms-controller],[ms-important]{  
             display: none;  
             visibility: hidden;  
         }  
     </style>  
 </head>  
 <body>  
 <div ms-controller="test">  
     <p>{{xxx}}</p>  
     <div ms-include="'tpl'"></div>  
 </div>  
 </body>  
 <script src="../avalon.js"></script>  
 <script type="avalon" id="tpl">  
     here, {{ 3 + 6 * 5 }}  
 </script>  
 <script>  
     avalon.ready(function(){  
   
         avalon.define({  
             $id: "test",  
             xxx: "引入内部模板"  
         });  
   
         avalon.scan();  
     });  
 </script>  
 </html>  

注意，ms-include的值要用引号括起，表示这只是一个字符串，这时它就会搜索页面的具有此ID的节点，取其innerHTML，放进ms-include所在的元素内部。否则这个tpl会被当成一个变量，框架就会在VM中检测有没有此属性，有就取其值，重复上面的步骤。

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

同时使用时是先加载后渲染的关系
由于ms-include绑定需要定义在一个元素节点上，它的作用仅仅是一个占位符，提供一个插入位置的容器。如果用户想在插入内容后，去掉这容器，可以使用data-include-replace="true"。

2.外部模板

创建一个html文件，比如：tmpl.html，内容为：

[html]view plaincopy 
   
 <div>这是一个独立的页面</div>  
 <div>它是通过AJAX的GET请求加载下来的</div>  

然后我们这样引入它：

[html]view plaincopy 
   
 <div  ms-include-src="'tmpl.html'"></div>  

注意，ms-include-src需要后端服务器支持，因为用到同域的AJAX请求。