经常在各种框架之间切换使用是种什么体验？

< — todo . html — >

< ! DOCTYPE html >

< html >

< head >

< meta charset = ’ utf - 8 ’ >

< title > BtoDo < / title >

<script type = ’ text / javascript ’ src = ’ lib /underscore.min.js’></s cript >

<script type = ’ text / javascript ’ src = ’ lib /jquery-2.1.4.min.js’></s cript >

<script type = ’ text / javascript ’ src = ’ lib /backbone.min.js’></s cript >

<style type=’text/css’>

.list-wrapper {

margin : 20px auto ;

width : 300px ;

}

.done-true {

text-decoration : line-through ;

color : grey ;

}

input[type=’checkbox’] {

vertical-align : middle ;

}

.archive-btn {

color : blue ;

cursor : pointer ;

}

</style>

< / head >

< body >

< div class = ’ list - wrapper ’ id = ’ todo _ panel’ >

< h2 > Todo < /h2>

<span id=’remaining’></s pan > remaining [ archive ]

< ul id = ’ todo _ list’ >

< / ul >

< form onsubmit = ” return false ” >

< input placeHolder = ’ foo foo ’   type = ’ text ’ > < button class = ’ add_btn ’ > Add < / button >

< / form >

< / div >

<script type = ’ text / template ’ id = ’ list _ template’ >

< % for ( var p in data ) { % >

< li < % if ( data [ p ] . done ) { % > class = ’ done - true ’ < % } % > > ’   < % if ( data [ p ] . done ) { % > checked < % } % > > < %= data [ p ] . todo % > < /li>

<%}%>

</s cript >

<script type = ’ text / javascript ’ src = ’ app /todo.model.js’></s cript >

<script type = ’ text / javascript ’ src = ’ app /todo.view.js’></s cript >

< / body >

< / html >

/**

* [todo backbone model file]

*

*/

( function ( global , Backbone ) {

var todoCollection = new Backbone . Collection ( [ { todo : ‘ some demos ’ , done : false } , { todo : ’ some other todo ’ , done : true   } ] ) ;

global . todoCollection = todoCollection ;

} ) ( window , Backbone ) ;

/**

* [todo backbone view files]

*

*/

( function ( global , Backbone ) {

var todoCollection = global . todoCollection ;

/**

* BaseView

* 基础视图，指定了默认数据源，初始化行为

*/

var BaseView = Backbone . View . extend ( {

collection : todoCollection ,

initialize : function ( ) {

this . listenTo ( this . collection , ‘ add ’ , this . render ) ;

this . listenTo ( this . collection , ‘ remove ’ , this . render ) ;

}

} ) ,

/**

* RemainView

* 当前剩余计划数与总计划数的视图

* 方便用户了解当前所有任务完成状态。

*/

RemainView = BaseView . extend ( {

/**

* RemainView表示列表计划的完成状况，需要在状态改变时也做出对应

* 行为，所以它有特别的初始化行为。

* changed事件本来也可以归到父类的初始化函数当中，但这个事件其

* 实只在此视图中有使用，这样可以减少渲染函数调用次数.

*/

initialize : function ( ) {

BaseView . prototype . initialize . apply ( this , [ ] ) ;

this . listenTo ( this . collection , ‘ changed ’ , this . render ) ;

} ,

render : function ( model , collection ) {

var tpl = _ . template ( ‘ <%= rest %> of <%= total %> ‘ ) ,

rest = 0   ,

p ,

data = collection . toJSON ( ) ;

for ( p in data ) {

if ( ! data [ p ] . done ) {

++ rest ;

}

}

this . $ el . html ( tpl ( { rest : rest , total : data . length } ) ) ;

}

} ) ,

/**

* ListView

* 展示具体计划的列表视图

*/

ListView = BaseView . extend ( {

events : {

‘ click . check _ box’ : ‘ checked ’

} ,

render : function ( model , collection ) {

var tpl = _ . template ( $ ( ‘ # list _ template’ ) . html ( ) ) ;

this . $ el . html ( tpl ( { data : collection . toJSON ( ) } ) ) ;

} ,

checked : function ( e ) {

var target = e . target ,

key = target . getAttribute ( ‘ data - index ’ ) ,

model = this . collection . at ( key ) ;

model . set ( ‘ done ’ , target . checked ) ;

/**

* 手动触发

*/

this . collection . trigger ( ‘ changed ’ , { } , this . collection ) ;

}

} ) ,

/**

* PanelView

* 操作面板视图,这里决定新增以及完成动作的行为引起的视图变化

*/

PanelView = BaseView . extend ( {

events : {

‘ click . add _ btn’ : ‘ add ’ ,

‘ click . arc _ btn’ : ‘ archived ’

} ,

add : function ( e ) {

var target = e . target ,

$ input = $ ( target . parentNode ) . find ( ‘ input ’ ) ;

this . collection . add ( {

todo : $ input . val ( ) ,

done : false

} ) ;

$ input . val ( ‘’ ) ;

} ,

archived : function ( ) {

this . collection . remove ( this . collection . where ( { done : true } ) ) ;

}

} ) ;

/**

* 文档加载完全后开始实例化各个类

*/

global . onload = function ( ) {

var list = new ListView ( {

el : $ ( ‘ # todo _ list’ )

} ) ,

remaining = new RemainView ( {

el : $ ( ‘ # remaining ’ )

} ) ,

Panel = new PanelView ( {

el : $ ( ‘ # todo _ panel’ )

} ) ;

/**

* 放入默认数据

*/

todoCollection . add ( [ { todo : ‘ some demos ’ , done : false } , { todo : ’ some other todo ’ , done : true   } ] ) ;

} ;

} ) ( window , Backbone ) ;

< - ! html - >

< ! doctype html >

< html ng - app = ” todoApp ” >

< head >

<script type = ” text / javascript ” src = ’ lib /angular.min.js’></s cript >

<script src = ” app /todo.js”></s cript >

<style type=”text/css”>

.done-true {

text-decoration : line-through ;

color : grey ;

}

.list-wrapper {

margin : 20px auto ;

width : 300px ;

}

</style>

< / head >

< body >

< div class = ’ list - wrapper ’ >

< h2 > Todo < /h2>

<div ng-controller=”TodoListController as todoList”>

<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</s pan >

[ < a href = "””" > archive < /a>]

<ul class=”unstyled”>

<li ng-repeat=”todo in todoList.todos”>

<input type=”checkbox” ng-model=”todo.done”>

<span class=”done-{{todo.done}}”>{{todo.text}}</s pan >

< / li >

< / ul >

< form ng - submit = ” todoList . addTodo ( ) ” >

< input type = ” text ” ng - model = ” todoList . todoText ”   size = ” 30 ”

placeholder = ” foo foo ” >

< input class = ” btn - primary ” type = ” submit ” value = ” add ” >

< / form >

< / div >

< / div >

< / body >

//app.js

angular . module ( ‘ todoApp ’ , [ ] )

. controller ( ‘ TodoListController ’ , function ( ) {

var todoList = this ;

todoList . todos = [

{ text : ’ learn angular ’ , done : true } ,

{ text : ’ build an angular app ’ , done : false } ] ;

todoList . addTodo = function ( ) {

todoList . todos . push ( { text : todoList . todoText , done : false } ) ;

todoList . todoText = ‘’ ;

} ;

todoList . remaining = function ( ) {

var count = 0 ;

angular . forEach ( todoList . todos , function ( todo ) {

count += todo . done ? 0 : 1 ;

} ) ;

return count ;

} ;

todoList . archive = function ( ) {

var oldTodos = todoList . todos ;

todoList . todos = [ ] ;

angular . forEach ( oldTodos , function ( todo ) {

if ( ! todo . done ) todoList . todos . push ( todo ) ;

} ) ;

} ;

} ) ;

< ! - html - >

< ! DOCTYPE html >

< html >

< head >

< title > Hello React < / title >

<script src = ” lib /react.js”></s cript >

<script src = ” lib /JSXTransformer.js”></s cript >

<style type=”text/css”>

.done-true {

text-decoration : line-through ;

color : grey ;

}

.list-wrapper {

margin : 20px auto ;

width : 300px ;

}

input[type=’checkbox’] {

vertical-align : middle ;

}

.archive-btn {

color : blue ;

cursor : pointer ;

}

</style>

< / head >

< body >

< div class = ’ list - wrapper ’ id = ” example ” > < / div >

<script type = ” text / jsx ” src = ” app /todo.js”></s cript >

< / body >

< / html >

// todo.js文件

/**

* ToDoTips 剩余与总计计数展示视图

*/

var ToDoTips = React . createClass ( {

render : function ( ) {

var items = this . props . items ,

remains = 0 ;

items . map ( function ( item ) {

if ( ! item . done ) {

++ remains ;

}

} ) ;

return < span > { remains } /{items.length}</s pan > ;

}

} ) ;

/**

* TodoList

*      计划列表展示视图

*      包含了两个行为状态,切换计划状态，以及清理已完成计划数  

*/

var TodoList = React . createClass ( {

getInitialState : function ( ) {

return { items : this . props . items } ;

} ,

shouldComponentUpdate   : function ( nextProps ) {

this . state . items . push ( nextProps . nextItem ) ;

return true ;

} ,

archived : function ( ) {

var items = this . state . items . concat ( [ ] ) ,

remainItems = [ ] ;

items . forEach ( function ( item ) {

if ( ! item . done ) {

remainItems . push ( item ) ;

}

} ) ;

this . setState ( { items : remainItems } ) ;

} ,

toggle : function ( e ) {

var index = e . target . getAttribute ( ‘ data - index ’ ) ,  

items = this . state . items . concat ( [ ] ) ;

items [ index ] . done = ! items [ index ] . done ;

this . setState ( { items : items } ) ;

} ,

render : function ( ) {

var that = this ;

var createItem = function ( item , index ) {

var itemClass = item . done ? ‘ done - true ’ : ‘’ ;

return < li className = { itemClass } > < input type = ’ checkbox ’ data - index = { index } onClick = { that . toggle } checked = { item . done } / > { item . todo } < / li > ;

} ;

return (

< div >

< span > remaining < ToDoTips items = { this . state . items } /> [archive]</s pan >

< ul > { this . state . items . map ( createItem ) } < / ul >

< / div >

) ;

}

} ) ;

/**

*  TodoApp 面板入口

*  新增计划行为以及状态。

*/

var TodoApp = React . createClass ( {

getInitialState : function ( ) {

return { items : this . props . sourceData } ;

} ,

handleSubmit : function ( e ) {

e . preventDefault ( ) ;

var texts = e . target [ ‘ text ’ ] . value   ;

this . setState ( {

nextItem : {

todo : texts ,

done : false

}

} ) ;

e . target [ ‘ text ’ ] . value = ‘’ ;

} ,

render : function ( ) {

return (

< div >

< h3 > TODO < / h3 >

< TodoList items = { this . state . items } nextItem = { this . state . nextItem }   / >

< form onSubmit = { this . handleSubmit } >

< input

placeholder = ’ foo foo ’

name = ’ text ’   / >

< button > { ‘ Add # ’ + ( this . state . items . length + 1 ) } < / button >

< / form >

< / div >

) ;

}

} ) ;

/**

* [sourceData 初始数据]

* @type {Array}

*/

var sourceData = [

{ todo : ’ learn React ’ , done : true } ,

{ todo : ’ build an React app ’ , done : false } ] ;

React . render (

< TodoApp   sourceData = { sourceData } / > ,

document . getElementById ( ‘ example ’ )

) ;