如果按的是回车键就去创建新任务

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

现在,我们已经知道了,回车键的代号是数字 13 ... 找到应用视图里面,处理按键事件的 createOnEnter 这个方法 ... 在这里,用一个 if 语句去判断一下 ...

判断的条件就是,按下的按键如果不是 13 ... 也就是,不是回车键的话 .... 要做的事就是 return; 返回 ... 表示什么也不做 ...

if (event.which !== 13) {
return;
}

在这个 if 语句的下面 ... 再设置一下按的按键如果是回车键的话,要做的事儿 ...

要做的事就是使用任务集合的 create 方法,去创建并存储这个任务 ... 给这个方法一个对象参数 ... 再设置一下任务模型的属性 ...

先设置一下 title 属性 ... 任务的标题 ... 它的值就是用户在文本框里输入的东西 ... 得到这个文本框的值,可以这样 .. 找到当前视图里面的 #new-todo 这个元素 ... 就是输入任务内容的文本框元素 ... 调用 val() 方法 ... 这个方法可以得到文本框里的值 ...

最后再使用一个 trim 方法 ... 这个方法可以去掉前后没用的空格 ..

再设置一下 completed 属性的值 ... 默认这个属性的值是 false ...

app.todoList.create({
title : this.$('#new-todo').val().trim(),
completed : false
});

再另起一行,创建成功以后,可以把文本框里的值设置成空白的 ... 使用当前视图里的 #new-todo 这个元素的 val 方法 ... 这是一个 jQuery 的方法 ... 它可以得到元素里的值,也可以设置元素里面的值 ... 这里我们把元素里的值设置成空白的 ...

this.$('#new-todo').val('');

另外,在这个判断的条件里面,我们再加上一个条件 .. 如果用户输入的东西是空白的 .. 同样要 return ... 不然会存储空白的内容 ...

在这个 if 语句里面 ... 用两个 | 符号 ... 表示 或者 ... 条件是文本框里的值是空白的 ...

this.$('#new-todo').val().trim() === ''

这样的话,有两种情况不会去创建新任务,用户没有按下回车键的时候,还有就是用户输入的东西在清理以后是空白的时候。

测试

保存 ... 下面去浏览器上试试 ..

刷新 ... 在文本框里输入任务的标题 . ... '为宁皓网升级' 按下回车键 ..

打开 Resources 选项卡 ... Local Storage ... 在这里, 可以找到创建的模型 ... 再输入一条新的任务 ... '晚上回家洗尿布' 回车 ..

再刷新一下 ... 同样会显示出新创建的任务数据 ...

1:52
0:00
6:36
3:22
3:42
0:00
2:29
4:08

如果按的是回车键就去创建新任务《 Backbone 应用实例 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点