您的位置:首页 > Web前端 > JQuery

6小时jQuery开发小应用(实录 一)

2017-07-16 00:00 211 查看
演示地址:http://todolist.t.imooc.io/



初期代码:

;(function (){
'use strict';

var $from_add_task = $('.add-task')
//, new_task = {}
, task_list = []
;

init();

$from_add_task.on('submit', function (e){
var new_task = {};

e.preventDefault();

new_task.content = $(this).find('input[name=content]').val();
if(!new_task.content) return;

if (add_task(new_task)){
render_task_list();
}
console.log("new_task", new_task)
//store.clear()

//var result = add_task(new_task);
})

function add_task(new_task){
task_list.push(new_task);
store.set('task_list', task_list);

return true;
console.log("task_list", task_list)
}

function init() {
task_list = store.get('task_list') || [];
if (task_list.length) render_task_list();
}

function render_task_list() {
var $task_list =$('.task-list')
$task_list.html('')
for(var i = 0; i< task_list.length; i++){
var $task = render_task_tpl(task_list[i]);
$task_list.append($task)
}
}

function render_task_tpl(data) {
var list_item_tpl =
'<div class="task-item">' +
'<span><input type="checkbox"></span>' +
'<span class="task-content">' + data.content + '</span>' +
'<span class="action delete"> 删除</span>' +
'<span class="action detail"> 详细</span>' +
'</div>';
return $(list_item_tpl)
}

})();
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  constructor prototyp