update es5 demos
This commit is contained in:
dntzhang
parent
3e695bb482
commit
988b43a807
|
|
@ -1,40 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<!--[if lt IE 9]><script type="text/javascript" crossorigin="anonymous" src="//s.url.cn/qqun/xiaoqu/buluo/p/js/es5-sham-es5-sham.min.77c4325f.js"></script><![endif]-->
|
||||
<script src="../../dist/omi.js"></script>
|
||||
<script>
|
||||
|
||||
var Hello = Omi.create("Hello", {
|
||||
style: function () {
|
||||
return "h1{ cursor:pointer }";
|
||||
},
|
||||
handleClick: function (dom) {
|
||||
alert(dom.innerHTML)
|
||||
},
|
||||
render: function () {
|
||||
return ' <div><h1 onclick="handleClick(this, event)">Hello ,{{name}}!</h1></div>'
|
||||
}
|
||||
});
|
||||
|
||||
var Test = Omi.create("Test", {
|
||||
render: function () {
|
||||
return '<div>\
|
||||
<div>Test</div>\
|
||||
<Hello data-name="Omi" />\
|
||||
</div>'
|
||||
}
|
||||
});
|
||||
|
||||
Omi.render(new Test(),'#container');
|
||||
</script>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<!--[if lt IE 9]><script type="text/javascript" crossorigin="anonymous" src="//s.url.cn/qqun/xiaoqu/buluo/p/js/es5-sham-es5-sham.min.77c4325f.js"></script><![endif]-->
|
||||
<script src="../../dist/omi.js"></script>
|
||||
<script>
|
||||
|
||||
var Hello = Omi.create("Hello", {
|
||||
style: function () {
|
||||
return "h1{ cursor:pointer }";
|
||||
},
|
||||
handleClick: function (event) {
|
||||
alert(event.target.innerHTML)
|
||||
},
|
||||
render: function () {
|
||||
return ' <div><h1 onclick="handleClick">Hello ,{{name}}!</h1></div>'
|
||||
}
|
||||
});
|
||||
|
||||
var Test = Omi.create("Test", {
|
||||
render: function () {
|
||||
return '<div>\
|
||||
<div>Test</div>\
|
||||
<Hello data-name="Omi" />\
|
||||
</div>'
|
||||
}
|
||||
});
|
||||
|
||||
Omi.render(new Test(),'#container');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,66 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="../../dist/omi.js"></script>
|
||||
<script>
|
||||
|
||||
var Todo = Omi.create("Todo",{
|
||||
install:function(){
|
||||
this.data.length = this.data.items.length;
|
||||
},
|
||||
installed:function(){
|
||||
this.list.data = this.data;
|
||||
this.update();
|
||||
},
|
||||
add :function(evt) {
|
||||
evt.preventDefault();
|
||||
this.list.data.items.push(this.refs.textBox.value);
|
||||
//alert(this.textBox.value);
|
||||
this.data.length = this.list.data.items.length;
|
||||
this.update();
|
||||
this.refs.textBox.value = "";
|
||||
},
|
||||
style:function () {
|
||||
return 'h3 { color:red; }\
|
||||
button{ color:green;}';
|
||||
},
|
||||
render:function(){
|
||||
return '<div>\
|
||||
<h3>TODO</h3>\
|
||||
<List omi-id="list" name="list" />\
|
||||
<form onsubmit="add(event)" >\
|
||||
<input ref="textBox" type="text" />\
|
||||
<button>Add #{{length}}</button>\
|
||||
</form>\
|
||||
</div>';
|
||||
}
|
||||
})
|
||||
|
||||
var List = Omi.create("List",{
|
||||
render :function() {
|
||||
return '<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>';
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
var todo = new Todo({ items: ["aa","bb"] });
|
||||
|
||||
Omi.render(todo,'body',true);
|
||||
|
||||
setTimeout(function(){
|
||||
todo.list.remove();
|
||||
},3000)
|
||||
|
||||
setTimeout(function(){
|
||||
// todo.list.restore();
|
||||
},6000)
|
||||
</script>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="../../dist/omi.js"></script>
|
||||
<script>
|
||||
|
||||
var Todo = Omi.create("Todo",{
|
||||
install:function(){
|
||||
this.data.length = this.data.items.length;
|
||||
},
|
||||
installed:function(){
|
||||
this.list.data = this.data;
|
||||
this.update();
|
||||
},
|
||||
add :function(evt) {
|
||||
evt.preventDefault();
|
||||
this.list.data.items.push(this.refs.textBox.value);
|
||||
//alert(this.textBox.value);
|
||||
this.data.length = this.list.data.items.length;
|
||||
this.update();
|
||||
this.refs.textBox.value = "";
|
||||
},
|
||||
style:function () {
|
||||
return 'h3 { color:red; }\
|
||||
button{ color:green;}';
|
||||
},
|
||||
render:function(){
|
||||
return '<div>\
|
||||
<h3>TODO</h3>\
|
||||
<List omi-id="list" name="list" />\
|
||||
<form onsubmit="add" >\
|
||||
<input ref="textBox" type="text" />\
|
||||
<button>Add #{{length}}</button>\
|
||||
</form>\
|
||||
</div>';
|
||||
}
|
||||
})
|
||||
|
||||
var List = Omi.create("List",{
|
||||
render :function() {
|
||||
return '<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>';
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
var todo = new Todo({ items: ["aa","bb"] });
|
||||
|
||||
Omi.render(todo,'body',true);
|
||||
|
||||
setTimeout(function(){
|
||||
todo.list.remove();
|
||||
},3000)
|
||||
|
||||
setTimeout(function(){
|
||||
// todo.list.restore();
|
||||
},6000)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue