toPrecision 导致数据绑定无法更新

Question

我正在为一款使用 HTML、CSS 和 JavaScript 渲染 UI 元素的游戏开发 UI mod . mod 显示系统中所有行星的总表面积信息。它通过计算总表面积的函数实现这一点，然后将此信息传递给另一个函数进行格式化。最后，数据绑定用于在 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) 的使用。当精度值低于 5 或调用 Math.floor(number) 时，数据绑定将不会始终更新。

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

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

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

  <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>

Answer 1

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

  <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; 
}

toPrecision 导致数据绑定无法更新

toPrecision is causing a data bind to fail to update

javascript

data-binding

ecmascript-5

knockout.js