RubyLouvre
commented
11 years ago <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>scope</title>
<style>
.my-class{
color: yellow;
background:orange;
}
.your-class {
line-height:3;
width:200px;
height:100px;
}
.his-class{
text-indent:2em;
font-size:14px;
}
.single{
width:200px;
height:100px;
background:lightgreen;
}
</style>
</head>
<body>
<p>First name: <input ms-model="firstName" /></p>
<p>Last name: <input ms-model="lastName" ms-disabled='false' disabled='disabled' /></p>
<h2>Hello, <input ms-event="change" ms-model="fullName">!</h2>
<div>{{firstName +" | "+ lastName }}</div>
<div>{{firstName | uppercase | aaa }}</div>
<a href='{{2252}}/{{lastName}}' title='{{firstName}}'>这是链接</a>
<div id="eee">Normal: {{1 + 8}}</div>
<div ms-skip>Ignored: {{1 + 2}}</div>
<hr/>
<ul ms-each-el='array' id="array">
<li>这是动态生成的{{el}}</li>
</ul>
<div ms-if="bool">sssss</div>
<form name="myForm" >
<input type="radio" ms-model="color" value="red"> <br/>
<input type="radio" ms-model="color" value="green"> <br/>
<input type="radio" ms-model="color" value="blue"> <br/>
<input type="checkbox" ms-model="vehicle" value="bike"><br>
<input type="checkbox" ms-model="vehicle" value="car"> <br>
<input type="checkbox" ms-model="vehicle" value="ship">
<p> I have a {{vehicle}}</p>
<tt>color = {{color}}</tt><br/>
</form>
<select ms-model="select">
<option>
test0
</option>
<option>
test1
</option>
<option>
test2
</option>
</select>{{select}}
<div ms-class="{ 'my-class':true, 'your-class':true, 'his-class':true }">xxxxxxxxx</div>
<script src="mass.js" type="text/javascript"></script>
<script type="text/javascript">
require("more/avalon2", function() {
})
</script>
</body>
</html>
avalon原来是mass Framework的一个子模块，v4之前是采用knockout那样笨重的属性变方法的方式实现依赖收集与通知变更。v4时突发奇想，然后Object.defineProperties与VBS重载等于号，实现更优雅的依赖收集与通知变更。接口设计上从angular,js与rivets.js扒了不少好东西，形成现在的样子。现保存在这里，让大家看看这伟大历程