数据无法显示到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>'+。


0
0

6小时 jQuery开发一个前端应用

搭建一个清单应用,一次性掌握jQuery核心功能和使用技巧

1219 学习 · 161 问题

查看课程