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请求。
时间： 2024-10-13 13:24:21