JSFiddle - React, Tailwind, and code Playground

by ZhongluShi

HTML

<script src="//unpkg.com/mithril/mithril.js"></script>

JavaScript

//Todo为构造函数   list存储Todo  todo相当于接口 
var todo = {

    Todo : function(str) {
       this.title = str;
       this.done = false;
   },
    list:[],
		filter:"",
  
    setValue: function(v) {
		todo.title = v
		},
		
		add:function(){
		   if(todo.title.trim().length>0){
			 todo.list.push(new todo.Todo(todo.title));
			 todo.title=""}
		},
		
		deleted : function(key){
         todo.list.splice(key, 1);
      },
			
	  clear :  function(){
            for(var i = todo.list.length - 1; i >= 0; i--) {
                if (todo.list[i].done) {
                     todo.list.splice(i, 1);
                }
            }  
        },
		completed : function(){
           todo.filter = "Completed"
        },		
		active : function(){
           todo.filter = "Active"
        },
    all : function(){
           todo.filter = ""
        },
				
		isVisible : function (task) {
		        switch (todo.filter) {
			        case 'Active':
				          return !task.done;
			        case 'Completed':
			           	return task.done;
			        default: return true;
		       }
	      }
}




var TodoList = {
    view: function() {
        return m("div",[
				          m("header",[
				m("input", {
            onchange: m.withAttr("value", function(v) {todo.title = v}),
            value: todo.title,
        }),m("button",{onclick:todo.add},"ADD"),
				m("ul",todo.list.filter(todo.isVisible).map(function(task) {
                    return m("li", [
										  m("input[type=checkbox]", {onclick: m.withAttr("checked",function(v) {task.done = v}), checked: task.done}),
                      m("input",{style: {textDecoration: task.done ? "line-through" : "none"},onchange:m.withAttr("value",function(v) {task.title = v}), value : task.title}),
                       m("button", {onclick: todo.deleted}, "x"),
                        ])
                 }))]
								  ),
								  m("footer",[
									m('span#todo-count', [
                    m('strong', todo.list.length), ' item' +...