我的MVVM框架 v3教程——todos例子
我的MVVM框架 v3教程——todos例子
我的MVVM框架 v3教程——todos例子
每个MVC框架都爱搞个todos演示
它的HTML如下：
<!--[if IE 6]><center style="display:inline-block;zoom:1;text-align:left;"> <![endif]-->
< div id = "todoapp" >
< header >
< h1 >Todos</ h1 >
< input id = "new-todo" type = "text" placeholder = "What needs to be done?" data-on-keypress = "addPost" >
</ header >
< section id = "main" data-display = "show" >
< input id = "toggle-all" type = "checkbox" data-on-click = "checkAll" >
< label for = "toggle-all" >Mark all as complete</ label >
< ul id = "todo-list" data-each-post = "posts" >
< li data-on-dblclick = "edit" >
< div class = "view" >
< input class = "toggle" type = "checkbox" data-on-click = "togglePost" />
< label data-text = "post.title" ></ label >
< a class = "destroy" data-on-click = "removePost" ></ a >
</ div >
< input class = "edit" type = "text" data-value = "post.title" data-on-blur = "blur" />
</ li >
</ ul >
</ section >
< footer data-display = "show" >
< a id = "clear-completed" data-on-click = "remove" data-display = "donePosts" >Clear completed</ a >
< div id = "todo-count" data-html = "leftPosts" >
</ div >
</ footer >
</ div >
<!--[if IE 6]></center> <![endif]-->
< div id = "instructions" >
Double-click to edit a todo.
</ div >
< div id = "credits" >
Created by
< br />
< a href = " http://jgn.me/ " >Jér?me Gravel-Niquet</ a >.
< br />Rewritten by: < a href = " http://addyosmani.github.com/todomvc " >TodoMVC</ a >.
</ div >
require( "avalon,ready" , function ($) {
var $$ = $.MVVM
var VM = $$.toViewModel({
posts: [], //这是评论列表
addPost: function (e){ //添加评论
if ( this .value && e.keyCode == 13){
VM.posts.push({
title: this .value
})
this .value = "" ;
}
},
leftPosts: $$.compute( function (){ //还剩下多少评论没打勾
var len = this .posts.length - $( ".toggle:checked" ).length;
return "<b>" + len + "</b>" + (len <= 1 ? "item" : "items" ) + " left"
},[ "posts" ]),
donePosts: $$.compute( function (){ //有多少评论被打勾
return $( ".toggle:checked" ).length
},[ "posts" ]),
removePost: function (){ //移除单条评论
var index = $( "#main .destroy" ).index( this )
if (index != -1){
VM.posts.removeAt(index)
}
},
remove: function (){ //移除所有被打勾的评论，通过erase方法，它传入一个元素，会找到它对应的VM中的数据
var array = VM.posts, array2 = []
$( ".toggle:checked" ).each( function (el, i){
array.erase(el)
})
},
edit: function () { //让那条评论可编辑
$( this ).addClass( "editing" ).siblings().removeClass( "editing" )
$( this ).find( ".edit" ).focus();
},
show: $$.compute( function (){ //如果存在评论就把列表显示出来
return this .posts.length;
},[ "posts" ]),
blur: function (){ //失去焦点就失去编辑状态
$( this ).parents( ".editing" ).removeClass( "editing" )
},
checkAll: function (){ //勾选或不勾选所有评论
var els = $( ".toggle" ).attr( "checked" , this .checked)
for ( var i = 0,el; el = els[i++];){
VM.togglePost.call(el);
}
},
togglePost: function (){
$$.notify( "leftPosts" ,VM) //通知leftPosts更新
$$.notify( "donePosts" ,VM)
$( this ).parents( "li" ).toggleClass( "done" );
}
});
$$.render(VM);
})
<!DOCTYPE html>
<html>
<head>
<title>todos</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://files.cnblogs.com/rubylouvre/todos.css"/>
<script src="https://files.cnblogs.com/rubylouvre/mass_merge20121214.js"> </script>
<script type="text/javascript">
$.config.level = 6
require("avalon20121214,ready", function($) {
var $$ = $.MVVM
var VM = $$.toViewModel({
posts: [],
addPost: function(e){
if(this.value && e.keyCode == 13){
VM.posts.push({
title: this.value
})
this.value = "";
}
},
leftPosts: $$.compute( function(){
var len = this.posts.length - $(".toggle:checked").length;
return "<b>" + len +"</b>" + (len <= 1 ? "item" : "items") +" left"
},["posts"]),
donePosts: $$.compute( function(){
return $(".toggle:checked").length
},["posts"]),
removePost: function(){
var index = $("#main .destroy").index(this)
if(index != -1){
VM.posts.removeAt(index)
}
},
remove: function(){
var array = VM.posts, array2 = []
$(".toggle:checked").each(function(el, i){
array.erase(el)
})
},
edit: function() {
$(this).addClass("editing").siblings().removeClass("editing")
$(this).find(".edit").focus();
},
show: $$.compute( function(){
return this.posts.length;
},["posts"]),
blur: function(){
$(this).parents(".editing").removeClass("editing")
},
checkAll: function(){
var els = $(".toggle").attr("checked", this.checked)
for(var i = 0,el; el = els[i++];){
VM.togglePost.call(el);
}
},
togglePost: function(){
$$.notify("leftPosts",VM)//通知leftPosts更新
$$.notify("donePosts",VM)
$(this).parents("li").toggleClass( "done" );
}
});
$$.render(VM);
})
</script>
</head>
<body>
<!--[if IE 6]><center style="display:inline-block;zoom:1;text-align:left;"> <![endif]-->
<div id="todoapp">
<header>
<h1>Todos</h1>
<input id="new-todo" type="text" placeholder="What needs to be done?" data-on-keypress="addPost">
</header>
<section id="main" data-display="show">
<input id="toggle-all" type="checkbox" data-on-click="checkAll">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-each-post="posts">
<li data-on-dblclick="edit" >
<div class="view">
<input class="toggle" type="checkbox" data-on-click="togglePost" />
<label data-text="post.title"></label>
<a class="destroy" data-on-click="removePost"></a>
</div>
<input class="edit" type="text" data-value="post.title" data-on-blur="blur" />
</li>
</ul>
</section>
<footer data-display="show">
<a id="clear-completed" data-on-click="remove" data-display="donePosts">Clear completed</a>
<div id="todo-count" data-html="leftPosts">
</div>
</footer>
</div>
<!--[if IE 6]></center> <![endif]-->
<div id="instructions">
Double-click to edit a todo.
</div>
<div id="credits">
Created by
<br />
<a href="http://jgn.me/">Jér?me Gravel-Niquet</a>.
<br />Rewritten by: <a href="http://addyosmani.github.com/todomvc">TodoMVC</a>.
</div>
</body>
</html>
标签: mass
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于我的MVVM框架 v3教程——todos例子的详细内容...