客户端代码
这里通过Ajax请求将状态更新信息发送到服务器,客户端根据服务器返回
状态更新数组中对应的状态值(这里其实也可以直接将status值给数组)
//当复选框状态改变
taskBox.on('change', '.toggle', function () {
//通过方法得到当前的选中与否 is代表复选框是否选中(注意这里:不能省略)返回boolean(true,false)
var status = $(this).is(':checked');
//获取点击任务的id siblings拿到的是同级兄弟元素 .attr拿到其属性值
var id = $(this).siblings('button').attr('data-id');
//使用ajax向服务器发送数据更新用户状态
$.ajax({
url: '/todo/modifyTask',
type: 'post',
data: JSON.stringify({
_id: id,
completed: status
}),
contentType: 'application/json',
//服务器返回的是类似于data格式的数据
success: function (response) {
//获取点击任务id
var task = taskAry.findIndex(item => item._id == id);
//根据服务器返回状态更改列表状态
taskAry[task].completed = response.completed;
//将任务数据更新到页面
render();
}
})
})
这里通过判断数组中是否为completed来为li添加样式(删除线)
同样给复选框添加选中与否
<!-- 任务列表模板 -->
<script type="text/html" id="taskTpl">
{{each tasks}}
<li class="{{$value.completed ? 'completed' : ''}}">
<div class="view">
<input class="toggle" type="checkbox" {{$value.completed ? 'checked' : ''}}>
<label>{{$value.title}}</label>
<button class="destroy" data-id="{{$value._id}}"></button>
</div>
<input class="edit">
</li>
{{/each}}
服务器端代码
// 修改任务
todoRouter.post('/modifyTask', async (req, res) => {
// 执行修改操作
const task = await Task.findOneAndUpdate({_id: req.body._id}, _.pick(req.body, ['title', 'completed']),{new: true})
// 响应
res.send(task);
});