toPrecision 导致数据绑定无法更新答案

【问题标题】：toPrecision is causing a data bind to fail to updatetoPrecision 导致数据绑定无法更新
【发布时间】：2020-01-12 16:09:04
【问题描述】：

我正在为一款使用 HTML、CSS 和 JavaScript 呈现 UI 元素的游戏开发 UI 模块。这个模组显示系统中所有行星的总表面积信息。它通过一个计算总表面积的函数来实现这一点，然后将此信息传递给另一个函数进行格式化。最后，使用数据绑定在 UI 中显示此信息。

  var formatedString = function (number) {
    var km2 = 1000000
    number = number / km2
    if (number < 1000) {
      return number.toPrecision(3)
    } else {
      return Math.floor(number)
    }
  };

  model.systemSurfaceArea = ko.computed(function () {
    var area = 0
    model.selection.system().planets().forEach(function (planet) {
      if (planet.generator && planet.generator.biom != 'gas') {
        area += 4 * Math.PI * Math.pow(planet.generator.radius, 2)
      }
    })
    return formatedString(area)
  })

  var url = 'coui://ui/mods/section_of_foreign_intelligence/section_of_foreign_intelligence.html'
  $.get(url, function (html) {
    console.log("Loaded html " + url);
    var $fi = $(html)
    $('#system-detail').append($fi)
    ko.applyBindings(model, $fi[0])
  })

<span class="system" data-bind="text: $root.systemSurfaceArea"></span>k<sup>2</sup>

我遇到了一个错误，即某些系统的数据绑定没有更新。我可以通过使用控制台看到所有计算都正确执行，但屏幕上的值保持不变。我已经追溯到使用toPrecision(3)。当precision的值小于5，或者调用Math.floor(number)时，data-bind不会一直更新。

举个例子：我有系统 A、B 和 C。当我按 A、B、C 的顺序单击系统时，我希望看到系统大小 A、B、C。但发生的情况是我请参阅 A、B、B。按 C、B、A 的顺序单击会得到尺寸 C、C、A。在这种情况下，B 和 C 都失败了，但 A 不受影响并且始终正确显示。

我不知道为什么会这样，希望有人能提供帮助。

编辑：我发现从 HTML 中删除表格格式可以解决问题。我只是不明白为什么。

  <table>
    <tr>
      <td>
        Surface Area:
      </td>
      <td>
        <span class="system" data-bind="text: $root.systemSurfaceArea"></span>k<sup>2</sup>
      </td>
    </tr>
    <tr>
      <td>
        Threat Level:
      </td>
      <td>
        <span class="system" data-bind="text: $root.systemThreat"></span>
      </td>
    </tr>
  </table>

【问题讨论】：

难道B和C四舍五入后的值相同吗？ KO 只会在底层值发生变化时更新布局。如果不是这样，如果您可以向我们提供可以重现问题的工作代码，将会很有帮助。
在调查刚才的问题时，我发现它似乎与表中的数据绑定有关。删除表格格式可以解决问题。
@BrotherWoodrow 它们分别是 10.2 和 2.54。

标签： javascript data-binding knockout.js ecmascript-5

【解决方案1】：

我已经用 div 和 CSS 表格格式替换了我的 HTML 表格，它解决了我的问题。我仍然不明白为什么 HTML 表格破坏了一些东西，所以如果有人有答案，我会很乐意将其标记出来。

  <div class="table">
    <div class="tr">
      <div class="td">Surface Area:</div>
      <div class="td"><span class="system" data-bind="text: $root.systemSurfaceArea"></span>k<sup>2</sup></div>
    </div>
    <div class="tr">
      <div class="td">Threat Level:</div>
      <div class="td"><span class="system" data-bind="text: $root.systemThreat"></span></div>
    </div>
  </div>

.table {
   display: table;
   }
.tr { 
  display: table-row; 
}
.td { 
  display: table-cell; 
}

【讨论】：