删除复选框会在流星中选中以下复选框

Question

I have a meteor click event handler which is run, when you click on input checkbox.

The call to "setTaskCompleted" updates model in django which sets taskCompleted to true. (I am using django to store my data)

setCustomerTodo(customer): Gets the todo item for current logged in user.

Everything works but when i click on checkbox it deletes that field from view and mark it as completed in django models. But it makes input just below it checked.

"click input[type='checkbox']": function(){
        //changing state task completed 
        this.completed = !this.completed;

        //getting active user
        var customer = Session.get('active_user').player_number 

        var data = {'task_id': this.id,
                    'completed': this.completed };

        //Changing state of task completed
        Meteor.call('setTaskCompleted', data, function(error, result){
            if(error){
                console.log(error);
            }else{
                setCustomerTodo(customer);
            }
        });
    }

//Helper Function

Checkbox Helper Function:
Template.tasks.helpers({
    data: function(){
        return Session.get('todo');
     }
});

//Template

{{#each data}}
    <tr>
        <td><input class="check-completed" checked="{{completed}} " type="checkbox"></td>
        <td>{{todo}}</td>   
    </tr>
{{/each}}

Answer 1

Your browser is processing the click event and so are you (with your {{completed}}). Try adding preventDefault() to the beginning of your event:

"click input[type='checkbox']": function(event){
    event.preventDefault();
    //changing state task completed 
    this.completed = !this.completed;