2

シンプルなT-DOアプリを作ってphonegapを学んでいます。

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>To-dos</title>
    </head>
    <body onload='loadToDoList()'>
        <input type='button' value='Add To-do' onclick='createNewToDo()'/>
        <input type='button' value='Remove completed To-dos' onclick='removeCompletedTasks()'/>
        <br/><br/>
        <table id='dataTable' width='100%' border='1'>
        </table>
        <script src='js/index.js'></script>
    </body>
</html>

index.js:

(function() {
  var addTableRow, checkboxClicked, deleteAllRows, deleteSelectedRow, loadToDoList, saveToDoList, viewSelectedRow;

  window.rowID = 0;

  saveToDoList = function() {
    var checkBoxState, chkbox, i, row, rows, table, textValue, textbox, todoArray, _i, _len;
    todoArray = {};
    checkBoxState = 0;
    textValue = '';
    table = document.getElementById('dataTable');
    rows = table.rows;
    if (rows.length > 0) {
      i = 0;
      for (_i = 0, _len = rows.length; _i < _len; _i++) {
        row = rows[_i];
        chkbox = rows.cells[0].childNodes[0];
        if ((chkbox != null) && chkbox.checked === true) {
          checkBoxState = 1;
        } else {
          checkBoxState = 0;
        }
        textbox = row.cells[1].childNodes[0];
        textValue = textbox.value;
        todoArray["row" + (i++)] = {
          check: checkBoxState,
          text: textValue
        };
      }
    } else {
      todoArray = null;
    }
    return window.localStorage.setItem('todoList', JSON.stringify(todoArray));
  };

  loadToDoList = function() {
    var i, key, theList, val, _results;
    theList = JSON.parse(window.localStorage.getItem('todoList'));
    deleteAllRows();
    if (theList !== null && theList !== 'null') {
      i = 0;
      _results = [];
      for (key in theList) {
        val = theList[key];
        _results.push(addTableRow(theList["row" + (i++)], true));
      }
      return _results;
    }
  };

  deleteAllRows = function() {
    var i, rowCount, table, _i;
    table = document.getElementById('dataTable');
    rowCount = table.rows.count;
    for (i = _i = 0; 0 <= rowCount ? _i < rowCount : _i > rowCount; i = 0 <= rowCount ? ++_i : --_i) {
      table.deleteRow(i);
      rowCount--;
      i--;
    }
    return saveToDoList();
  };

  viewSelectedRow = function(todoTextField) {
    return alert(todoTextField.value);
  };

  deleteSelectedRow = function(deleteButton) {
    deleteButton.parentNode.parentNode.parentNode.removeChild();
    return saveToDoList();
  };

  checkboxClicked = function() {
    var chkbox, row, rows, table, textbox, _i, _len, _results;
    table = document.getElementById('dataTable');
    rows = table.rows;
    _results = [];
    for (_i = 0, _len = rows.length; _i < _len; _i++) {
      row = rows[_i];
      chkbox = row.cells[0].childNodes[0];
      textbox = row.cells[1].childNodes[0];
      if ((chkbox != null) && chkbox.checked === true && (textbox != null)) {
        textbox.style.setProperty('text-decoration', 'line-through');
      } else {
        textbox.style.setProperty('text-decoration', 'none');
      }
      _results.push(saveToDoList());
    }
    return _results;
  };

  addTableRow = function(todoDictionary, appIsLoading) {
    var cell1, cell2, element1, element2, row, rowCount, table;
    rowID++;
    table = document.getElementById('dataTable');
    rowCount = table.rows.length;
    row = table.insertRow(rowCount);
    cell1 = row.insertCell(0);
    element1 = document.createElement('input');
    element1.type = 'checkbox';
    element1.name = 'chkbox[]';
    element1.checked = todoDictionary['check'];
    element1.setAttribute('onclick', 'checkboxClicked()');
    cell1.appendChild(element1);
    cell2 = row.insertCell(1);
    element2 = document.createElement('input');
    element2.type = 'text';
    element2.name = 'txtbox[]';
    element2.size = 16;
    element2.id = 'text' + rowID;
    element2.value = todoDictionary['text'];
    element2.setAttribute('onchange', 'saveToDoList()');
    cell2.appendChild(element2);
    checkboxClicked();
    saveToDoList();
    if (!appIsLoading) {
      return alert('Task added successfully');
    }
  };

  window.createNewToDo = function() {
    var todo, todoDictionary;
    todoDictionary = {};
    todo = prompt('To-Do', '');
    if (todo != null) {
      if (todo === '') {
        return alert('To-Do can\'t be empty');
      } else {
        todoDictionary = {
          check: 0,
          text: todo
        };
        return addTableRow(todoDictionary, false);
      }
    }
  };

  window.removeCompletedTasks = function() {
    var chkbox, i, rowCount, table, _i;
    table = document.getElementById('dataTable');
    rowCount = table.rows.length;
    for (i = _i = 0; 0 <= rows ? _i < rows : _i > rows; i = 0 <= rows ? ++_i : --_i) {
      chkbox = table.rows[i].cells[0].childNodes[0];
      if ((chkbox != null) && chkbox.checked === true) {
        table.deleteRow(i);
        i--;
        rowCount--;
      }
    }
    saveToDoList();
    return alert('Completed tasks were removed');
  };

}).call(this);

新しい todo を作成できるので、私のcreateNewToDo機能は正常に動作します。しかし、todo をチェックして削除ボタンをクリックしても、何も起こりません。removeCompletedTasks関数が呼び出されないのはなぜですか?

4

1 に答える 1

0

JSFiddleで提供されているコードを次に示します。removeCompletedTasks が失敗する主な理由は、行が定義されていないことです。それが修正された後、他のエラーは、定義したメソッドが外部関数のスコープ内にあることによってのみ発生します。完了すると、それらはなくなり、呼び出すことができなくなります。

各メソッドにはウィンドウが必要です。彼らの前に。次に、saveToDoList に少し作業が必要です。テーブルメソッドは機能しません。行に直接アクセスしてください。必要な行を取得したら、その参照を使用します。

window.saveToDoList = function() {
   var checkBoxState, chkbox, i, row, rows, textValue, textbox, todoArray, _i, _len;
   todoArray = {};
   checkBoxState = 0;
   textValue = '';
   rows = document.getElementById('dataTable').rows;
   if (rows.length > 0) {
     i = 0;
     for (_i = 0, _len = rows.length; _i < _len; _i++) {
       row = rows[_i];
       chkbox = row.childNodes[0];
       if ((chkbox != null) && chkbox.checked === true) {
         checkBoxState = 1;
       } else {
         checkBoxState = 0;
       }
       textbox = row.childNodes[1];
       textValue = textbox.value;
       todoArray["row" + (i++)] = {
         check: checkBoxState,
         text: textValue
       };
     }
   } else {
     todoArray = null;
   }
   return window.localStorage.setItem('todoList', JSON.stringify(todoArray));
};

このメソッドが機能するようになったので、removeCompletedTasks を微調整する必要があります。ループは単純な for ループに単純化できます。行の削除は、毎回新しくすることで行われます。これは遅いことはわかっていますが、少なくともクロムはテーブルの関数を元のように返します。チェックボックスを取得するには、もう 1 レベルの子のピーリングが必要でしたが、現在は機能しています。

  window.removeCompletedTasks = function() {
    var chkbox, i, rowCount, rows;
    rows = document.getElementById('dataTable').rows;
    rowCount = rows.length;
    for (i = 0; i < rowCount; ++i) {
      chkbox = rows[i].childNodes[0].childNodes[0];
      if ((chkbox != null) && chkbox.checked === true) {
        document.getElementById("dataTable").deleteRow(i);
        --i;
        --rowCount;
      }
    }
    saveToDoList();
    return alert('Completed tasks were removed');
  };

実際の例については、新しいJSFiddleを確認してください。

于 2014-05-20T22:22:34.327 に答える