正在学习avalon2,尝试将其和jquery下的easyui配合起来,写了一个例子,但未能生效,但将开发模式下输出的完整html保存下来再访问就可以生效,不知道问题在哪里?怀疑是加载顺序问题,请大家帮忙看看,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Full Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>
<script src="avalon.js" ></script>
</head>
<script>
var vm = avalon.define({
$id: "test",
array:[
{
opt: "region:'north',border:false",
con: "north region"
},
{
opt: "region:'west',split:true,title:'West'",
con: "west content"
},
{
opt: "region:'east',split:true,collapsed:true,title:'East'",
con: "east region"
},
{
opt: "region:'south',border:false",
con: "south region"
},
{
opt: "region:'center',title:'Center'",
con: ""
}
]
})
</script>
<body class="easyui-layout" ms-controller="test">
<div ms-for="el in @array" ms-attr="{'data-options': el.opt}" style="height:60px;width:150px;background:#B3DFDA;padding:10px">{{el.con}}</div>
</body>
</html>
想明白了,应该是加载顺序的问题,估计当做组件引入就正常了。