avalon中的模板绑定（ms-include）_avalon 插入的模板-CSDN博客

本文链接：https://blog.csdn.net/tyleraxin/article/details/46560099

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请求。