JSFiddle - React, Tailwind, and code Playground

by damngoto

HTML

<script src="http://regularjs.github.io/bower_components/regularjs/dist/regular.min.js"></script>
<h3>异步调用的时候事件响应存在bug（setTimeout, ajax等）</h3>
<script type="text/plain" id="template">
<ul>
    {{#list todos as todo}}
    <li class={{todo.compeleted? 'compeleted': ''}}>
        {{todo.content}} <a href='javascript:;' on-click={{this.remove(todo_index)}}>X</a> 
    </li>
    {{/list}}
</ul>
</script>
<div id="output"></div>

JavaScript

var app = new Regular({
    template: '#template',
    data: {
        todos: [
            {
                compeleted: false,
                content: 'homework'
            },
                        {
                compeleted: false,
                content: 'clean house'
            },
                        {
                compeleted: false,
                content: 'make a plan'
            }
        ]
    },
    remove: function(index){
        console.log(index)
        var data = this.data
        setTimeout(function(){
            data.todos.splice(index, 1)
            //app.$update('todos', data.todos)            
        }, 100)
    }
})
app.inject('#output')