我的MVVM框架 v3教程—

每个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 $$ = $.MVVMvar 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,this.checked);}},togglePost: function(bool){$$.notify("leftPosts",VM)//通知leftPosts更新$$.notify("donePosts",VM)$(this).parents("li").toggleClass( "done",bool );}});$$.render(VM);})

<!DOCTYPE html> <html> <head> <title>todos</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="http://files.cnblogs.com/rubylouvre/todos.css"/> <script src="http://files.cnblogs.com/rubylouvre/mass_merge.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,this.checked); } }, togglePost: function(bool){ $$.notify("leftPosts",VM)//通知leftPosts更新 $$.notify("donePosts",VM) $(this).parents("li").toggleClass( "done",bool ); } }); $$.render(VM); }) </script> </head> <body>  <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>  <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>

运行代码

我的MVVM框架 v3教程——todos例子相关推荐

迷你MVVM框架 avalonjs 入门教程
api大全 OniUI组件库学习教程视频教程: 地址1 地址2 关于AvalonJs 开始的例子扫描视图模型数据模型绑定作用域绑定(ms-controller, ms-important ...
迷你MVVM框架 avalonjs 入门教程（司徒正美）
迷你MVVM框架 avalonjs 入门教程关于AvalonJs 开始的例子扫描视图模型数据模型绑定属性与动态模板作用域绑定(ms-controller, ms-important) 模板 ...
WPF教程（十五）MVVM框架
作者本人以前是做C++的,当然很顺利的进入到WinForm,这也让我基本没有View-Model思维.学习WPF说白点也是因为其强大的UI,其实我忽视了很重要的一点,直到接触了MVVM框架,其实Web ...
迷你MVVM框架 avalonjs 学习教程20、路由系统
迷你MVVM框架 avalonjs 学习教程20.路由系统时间 2014-10-28 14:44:00 Ruby's Louvre 原文 http://www.cnblogs.com/rubyl ...
快速了解微信小程序的使用，一个根据小程序的框架开发的todos app
微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...
Silverlight实用窍门系列：52.Silverlight中的MVVM框架极速入门(以MVVM Light Toolkit为例)...
在本文将以MVVM Light Toolkit为例讲解MVVM框架在现实中的使用入门,首先我们在http://mvvmlight.codeplex.com/下载它的MVVM框架下来.也可以通过 htt ...
Reactive Extensions入门(5)：ReactiveUI MVVM框架
从前面几篇文章可以了解到,Rx作为LINQ的一种扩展,极大地简化了异步编程.但Rx的用法不仅如此,由于其可高的扩展性,在其他很多方面也有所应用. 在前面例子中,我们使用代码和UI界面上的元素打交道,这 ...
MVC与MVVM框架
什么是MVC? MVC思想:Controller负责将Model的数据用View显示出来. Model:处理数据逻辑的部分,负责在数据库中存储数据. View:处理数据的显示部分 Controller ...
android mvvm框架搭建_轻松搭建基于JetPack组件的MVVM框架
原文链接:轻松搭建基于JetPack组件的MVVM框架 - 掘金 Brick github gitee 介绍辅助android开发者搭建基于JetPack组件构建MVVM框架的注解处理框架.通过注解 ...

我的MVVM框架 v3教程——todos例子

我的MVVM框架 v3教程——todos例子相关推荐

最新文章

热门文章