My mvvm framework V3 tutorial-Todos example

Every MVC framework has a todos demo.

Its HTML is as follows:

<! -- [If IE 6]> <Center style = "display: inline-block; ZOOM: 1; text-align: Left;"> <! [Endif] --> <Div id = "todoapp"> 
Require ("aveon, ready", function ($) {var $ = $. mvvm var VM =$ $. toviewmodel ({posts: [], // This is the comment list addpost: function (e) {// Add comment if (this. value & E. keycode = 13) {VM. posts. push ({Title: This. value}) This. value = "" ;}}, leftposts: $. compute (function () {// how many comments are left missing var Len = This. posts. length-$ (". toggle: checked "). length; Return "<B>" + Len + "</B>" + (LEN <= 1? "Item": "items") + "Left"}, ["posts"]), doneposts: $. compute (function () {// how many comments are ticked return $ (". toggle: checked "). length}, ["posts"]), removepost: function () {// remove a single comment var Index = $ ("# Main. destroy "). index (this) if (index! =-1) {VM. posts. removeat (INDEX) }}, remove: function () {// remove all checked comments. Use the erase method to input an element, the data var array = VM in the corresponding VM will be found. posts, array2 = [] $ (". toggle: checked "). each (function (El, I) {array. erase (EL)}, EDIT: function () {// edit the comment $ (this ). addclass ("editing "). siblings (). removeclass ("editing") $ (this ). find (". edit "). focus () ;}, show: $. compute (function () {// if there is a comment, the list is displayed. return this. posts. length;}, ["posts"]), blur: function () {// The edit state is lost when the focus is lost $ (this ). parents (". editing "). removeclass ("editing")}, checkall: function () {// check or uncheck all comments var els =$ (". toggle "). ATTR ("checked", this. checked) for (VAR I = 0, El; El = els [I ++];) {VM. togglepost. call (El, this. checked) ;}}, togglepost: function (bool) {$ $. Y ("leftposts", Vm) // notify leftposts to update $. Y ("doneposts", Vm) $ (this ). parents ("Li "). toggleclass ("done", bool) ;}}); $. render (VM );})
<Br/> <! Doctype HTML> <br/> <pead> <br/> <title> todos </title> <br/> <meta http-equiv =" content-Type "content =" text/html; charset = UTF-8 "> <br/> <LINK rel =" stylesheet "href =" http://files.cnblogs.com/rubylouvre/todos.css "/> <br/> <SCRIPT src =" http://files.cnblogs.com/rubylouvre/mass_merge.js "> </SCRIPT> <br/> <SCRIPT type = "text/JavaScript"> <br/> $. config. level = 6 </P> <p> require ("avalon20121214, re Ady ", function ($) {</P> <p> var $ = $. mvvm <br/> var VM =$ $. toviewmodel ({<br/> posts: [], <br/> addpost: function (e) {<br/> If (this. value & E. keycode = 13) {<br/> VM. posts. push ({<br/> title: This. value <br/>}) <br/> This. value = ""; <br/>}< br/>}, <br/> leftposts: $. compute (function () {<br/> var Len = This. posts. length-$ (". toggle: checked "). length; <br/> return "<B>" + Len + "</B>" + (Le N <= 1? "Item": "items") + "Left" <br/>}, ["posts"]), <br/> doneposts: $. compute (function () {<br/> return $ (". toggle: checked "). length <br/>}, ["posts"]), <br/> removepost: function () {<br/> var Index = $ ("# Main. destroy "). index (this) <br/> If (index! =-1) {<br/> VM. posts. removeat (INDEX) <br/>}< br/>}, </P> <p> remove: function () {<br/> var array = VM. posts, array2 = [] <br/> $ (". toggle: checked "). each (function (El, I) {<br/> array. erase (EL) <br/>}) <br/>}, <br/> EDIT: function () {<br/> $ (this ). addclass ("editing "). siblings (). removeclass ("editing") <br/> $ (this ). find (". edit "). focus (); <br/>}, <br/> show: $. compute (function () {<br/> return th Is. posts. length; <br/>}, ["posts"]), <br/> blur: function () {<br/> $ (this ). parents (". editing "). removeclass ("editing") <br/>}, <br/> checkall: function () {<br/> var els = $ (". toggle "). ATTR ("checked", this. checked) <br/> for (VAR I = 0, El; El = els [I ++];) {<br/> VM. togglepost. call (El, this. checked); <br/>}< br/>}, <br/> togglepost: function (bool) {<br/>$ $. Y ("leftposts", Vm) // notify leftposts to update <br/> $. Y ("doneposts", Vm) <br/> $ (this ). parents ("Li "). toggleclass ("done", bool); </P> <p >}</P> <p >}); </P> <p >$. render (VM); </P> <p> }) </P> <p> </SCRIPT> </P> <p> </pead> <br/> <body> <br/> <! -- [If IE 6]> <Center style = "display: inline-block; ZOOM: 1; text-align: Left;"> <! [Endif] --> <br/> <Div id = "todoapp"> <br/> <peader> <br/> <p> todos </p> <br/> <input id = "new-Todo" type = "text" Placeholder = "what needs to be done? "Data-on-keypress =" addpost "> <br/> </peader> </P> <p> <section id =" Main "data-display =" show"> <br/> <input id = "toggle-all" type = "checkbox" data-on-click = "checkall"> <br/> <label for = "toggle- all "> mark all as complete </label> <br/> <ul id =" Todo-list "data-each-post =" posts "> <br/> <li data-on-dblclick = "edit"> <br/> <Div class = "View"> <br/> <input class = "toggle" type = "checkbox" data- on-click = "togglepos T "/> <br/> <Label data-TEXT =" post. title "> </label> <br/> <a class =" Destroy "data-on-click =" removepost "> </a> <br/> </div> <br/> <input class = "edit" type = "text" data-value = "post. title "data-on-blur =" Blur "/> <br/> </LI> <br/> </ul> <br/> </section> </P> <p> <footer data-display = "show"> <br/> <a id = "Clear-completed" data-on-click = "Remove" data-display = "doneposts"> clear completed </a> <br/> <Div id = "Todo -Count "data-html =" leftposts "> </P> <p> </div> <br/> </footer> <br/> </div> <br /> <! -- [If IE 6]> </center> <! [Endif] --> </P> <p> <Div id = "Instructions"> <br/> double-click to edit a todo. <br/> </div> </P> <p> <Div id = "Credits"> <br/> created by <br/> <br/> <a href = "http://jgn.me/"> J é r into me gravel-niquet </a>. <br/> rewritten by: <a href = "http://addyosmani.github.com/todomvc"> todomvc </a>. <br/> </div> </P> <p> </body> <br/> </ptml> </P> <p>
  RUN  Code