用RivetsJS检测数组的变化

Detecting changes to arrays with RivetsJS

本文关键字：变化 数组 检测 RivetsJS      更新时间：2023-09-26

我是RivetsJS的新用户，我试图弄清楚如何让我的绑定刷新当数组元素修改。当使用简单的赋值(即player_lives -= 1)时，Rivets似乎能够检测到非复杂变量的变化。它还检测何时将push()绑定到绑定数组。但是，当我将新值赋给现有数组元素时，不会发生刷新。下面是我正在尝试的一个例子:

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.8.1/rivets.bundled.min.js"></script>
    <script type="text/javascript">
        var numbers = [111, 222, 333];
        window.addEventListener('load', function() {
            rivets.bind(document.getElementById('numbers'), {numbers: numbers});
        });
        function changeNum() {
            numbers[0] = 5;
        }
    </script>
</head>
<body>
    <button onclick="changeNum()">Add a number</button>
    <div id="numbers">{ numbers }</div>
</body>
</html>

在这种情况下，{ numbers }绑定不刷新，原始值继续显示。我怀疑Rivets无法检测到正在发生的变化，但我不确定补救的最佳方法是什么。有什么建议吗?

似乎铆钉无法检测到数组索引的变化。

但是，当对数组的引用发生变化时，它会检测。

所以一个解决方案是触发一个引用更改，在你的例子中，类似于 
function changeNum() {
  //numbers[0] = 5;
  numbers = [5].concat(numbers.slice(1)); // [5, 222, 333]
}

将触发更新

相关文章：