现在,我们已经知道了,回车键的代号是数字 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 ... 在这里, 可以找到创建的模型 ... 再输入一条新的任务 ... '晚上回家洗尿布' 回车 ..
再刷新一下 ... 同样会显示出新创建的任务数据 ...