意外的数据表示形式

Unexpected data representation

本文关键字：数据表示 意外      更新时间：2023-09-26

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

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

此外，当您添加运行

时，由于某种原因，它会同时添加 2 个运行（运行添加功能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>

由于某种原因，示例没有在StackOverflow上加载，所以这里是现场演示：

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

尝试添加新运行，然后切换回添加页，然后切换回主页。

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

将行更改为：

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

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

另外，请更改您的"重定向"删除window.location.href = "index.php";。

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

请改用更改方法更改页面：

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

好吧，我找到了一个解决方案。我替换了：

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

跟：

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

据我了解，我

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

相关文章：