码迷,mamicode.com
首页 > 其他好文 > 详细

avalon中的模板绑定(ms-include)

时间:2015-06-19 16:56:06      阅读:685      评论:0      收藏:0      [点我收藏+]

标签:avalon   js   

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

avalon中的模板绑定(ms-include)

标签:avalon   js   

原文地址:http://blog.csdn.net/tyleraxin/article/details/46560099

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!