avalon中的模板引入分为 内部模板 和 外部模板
1.内部模板
<!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,内容为:
<div>这是一个独立的页面</div> <div>它是通过AJAX的GET请求加载下来的</div>然后我们这样引入它:
<div ms-include-src="'tmpl.html'"></div>注意,ms-include-src需要后端服务器支持,因为用到同域的AJAX请求。
原文地址:http://blog.csdn.net/tyleraxin/article/details/46560099