数据无法显示到task_list中
来源:4-3 添加及查看Task(3)
zxstar
2017-01-24
;(function(){
'use strict';
var $form_add_task=$(".add-task")
,task_list=[];
;
init();
$form_add_task.on('submit',function (e) {//点击提交,把写入值存到定义好的new_task对象中
/*禁用默认行为*/
e.preventDefault();
var new_task={};
/*获取新Task的值*/
new_task.content = $(this).find('input[name=add-task-text]').val();
/*如果新Task的值位空 则直接返回 否则继续执行*/
if(!new_task.content) return;
/*存入新Task*/
if(add_task(new_task)){
render_task_list();
}
})
function add_task(new_task){
/*将新的task推入task_list*/
task_list.push(new_task);
/*将task_list存入localStorage*/
store.set('task_list',task_list);
//标记添加成功
return true;
}
//起到初始化作用
function init(){ //从数据库取值到list数组的操作
task_list=store.get('task_list') || [];
}
function render_task_list(){
var $task_list=$('.task_list');
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>删除</span>'+
' <span>详细</span>'+
'</div>'
return $(list_item_tpl);
}
})();
1回答
-
龙晓秀
2017-02-23
同学你好,我是助教龙晓秀,非常高兴为您解答问题:
刚帮你检查了下代码,一共有2出错误可能导致 数据无法显示到task_list中:
1、注意下 render_task_list这个方法中:var $task_list=$('.task_list'); 这个的类名,HTML页面是<div class="task-list">。
2、渲染单个task模板的方法render_task_tpl()中, ' <span class="task-content">data.content</span>'+这边是变量拼接字符串,应该在2边加上"+"号,正确的写法是: ' <span class="task-content">+data.content+</span>'+。
00
相似问题