意外的数据表示

Question

所以我有一个应用程序，它允许您添加数据，然后它会显示所有数据（仍然是 wip）。所以到目前为止，我使用 localStorage 和 jQueryMobile 以及 jQueryUI 创建了一个创建和读取功能。

但由于某些原因，当我在页面（主要 page/add 数据页面）之间切换时，我在主页上看到了克隆数据。我看到的不是 2 个条目，而是 4 个条目，原来的 2 个条目彼此有一个副本。当我刷新页面时它工作正常，它只显示原始数据，没有克隆。请注意，只有当您转到“添加”页面然后返回主页（通过单击“主页”按钮）时才会发生这种情况。

此外，当您添加运行时，出于某种原因它会同时添加 2 运行s（运行将添加函数 2 次）

代码如下：

$(document).on('pageinit', function() {
  //Display runs
  showRuns();

  //Add Handler for Adding Runs
  $('#submitAdd').on('tap', addRun);

  /*
   * Show all runs on homepage
   */
  function showRuns() {
    //get runs Object
    var runs = getRunsObject();
    var i = 0;

    if (runs != '' && runs != null) {

      for (i; i < runs.length; i++) {
        $('#stats').append('<li class="ui-body-inherit ui-li-static"><strong>Date: </strong>' + runs[i]["date"] + '<strong> <br/>Distnace: </strong>' + runs[i]["kms"] + 'km</li>');
      }

      $('#home').bind('pageinit', function() {
        $('#stats').listview('refresh');
      });

    }
  }

  /*
   * addRun function
   */
  function addRun() {
    //Get form values
    var kms = $('#addKms').val();
    var date = $('#addDate').val();

    //Create 'Run' Object
    var run = {
      date: date,
      kms: parseFloat(kms)
    };

    var runs = getRunsObject();

    //Add run to runs array
    runs.push(run);
    alert('Run Added');

    //Set stringified objects to localstorage
    localStorage.setItem('runs', JSON.stringify(runs));

    //Redirect
    window.location.href = "index.php";

    //Preventing form from submiting
    return false;
  }

  /*
   * getRunsObject
   */
  function getRunsObject() {
    //Set runs array
    var runs = [];
    //Get current runs from localStorage
    var currentRuns = localStorage.getItem('runs');

    //Check localStorage
    if (currentRuns != null) {
      //Set to runs
      var runs = JSON.parse(currentRuns);
    }

    //Return sorted runs object
    return runs.sort(function(a, b) {
      return new Date(b.date) - new Date(a.date);
    });

  }

});

body {
  text-align: center;
}
ul {
  display: block;
}
.controls {
  float: right;
}

<!DOCTYPE html>
<html>

<head>
  <title>Running Tracker</title>
  <link rel="stylesheet" href="css/style.css" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
  <script src="js/script.js"></script>
</head>

<body>
  <!-- Main Page -->
  <div data-role="page" id="home">
    <header data-role="header" data-theme="a">
      <h1>Running Tracker</h1>
    </header>
    <div data-role="navbar">
      <ul>
        <li>
          <a href="#home" data-transition="none" data-icon="home">Home</a>
        </li>

        <li>
          <a href="#add" data-transition="none" data-icon="plus">Add Run</a>
        </li>
      </ul>
    </div>
    <div data-role="content">
      <h3>Welcome to the RunningTracker App</h3>
      <p>
        With this app you can track your running, jogging or walking.
      </p>

      <h3>Your Latest Runs:</h3>

      <ul id="stats" data-role="listview" data-filter="true" data-filter-placeholder="Filter runs by date or distance." data-inset="true"></ul>
      <br/>
      <button id="clearRuns" onclick="return confirm('Are You Sure?')">
        Clear Data
      </button>
    </div>
    <footer data-role="footer">
      <h4>RunningTracker &copy; 2015 GZ</h4>
    </footer>
  </div>
  <!-- Add Run Page -->
  <div data-role="page" id="add">
    <header data-role="header" data-theme="a">
      <h1>Running Tracker</h1>
    </header>
    <div data-role="navbar">
      <ul>
        <li>
          <a href="#home" data-transition="none" data-icon="home">Home</a>
        </li>

        <li>
          <a href="#add" data-transition="none" data-icon="plus">Add Run</a>
        </li>
      </ul>
    </div>
    <div data-role="content">
      <h3>Add Run</h3>
      <form id="addForm">
        <label for="km">Enter Kilometres:</label>
        <input type="number" id="addKms">
        <label for="km">Enter Date:</label>
        <input type="date" data-role="date" class="date" id="addDate" data-inline="true">
        <button id="submitAdd" class="ui-btn ui-corner-all">
          Add Run
        </button>
      </form>
    </div>
    <footer data-role="footer">
      <h4>RunningTracker &copy; 2015 GZ</h4>
    </footer>
  </div>
</body>

</html>

由于某些原因，示例未在 Whosebug 上加载，所以这里是现场演示：

http://runningtracker.herokuapp.com/index.php

尝试添加一个新的运行，然后切换回添加页面，再回到主页面。

Answer 1

好吧，我找到了解决办法。我替换了：

$(document).on('pageinit', function() {});

与：

$(document).one('pageinit', function() {});

据我所知，我有 2 个页面，所以每个函数都运行ning 两次，这导致了我的问题。通过使用 one 而不是 on，我将所有脚本强制为运行一次，无论我有多少页。

Answer 2

问题出在 pageinit 事件处理中。您省略了选择器，因此处理程序被调用两次（对于 home 和 add 页面），并且在这样做时您调用了 $('#submitAdd').on('tap', addRun); 两次，导致双 addRun 呼叫.

将行更改为：

$(document).on("pagecreate", "#home", function() {

（pagecreate 现在取代了 pageinit，参见 jQM API）

此外，请更改您的 "redirection" 删除 window.location.href = "index.php";。

该指令绕过 jQuery 移动导航系统更改页面，结果是在每次 addRun 调用后调用 pageinit 事件（虽然它应该只调用一次）。

改为使用 change 方法更改您的页面：

$("body").pagecontainer("change", "#home", { transition: "none" });

意外的数据表示

Unexpected data representation

javascript

jquery

jquery-ui

local-storage

jquery-mobile