使用 RivetsJS 检测数组的变化

Question

我是 RivetsJS 的新用户，我想弄清楚如何在数组元素修改时刷新我的绑定。看起来 Rivets 在使用简单赋值时能够检测到非复杂变量的变化（即 player_lives -= 1）。它还会检测我何时 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 无法检测到正在发生的变化，但我不确定采取什么最佳方法来补救。有什么建议吗？

Answer 1

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

但是，它会检测到数组引用何时更改。

因此，一种解决方案是触发参考更改，在您的示例中，类似于

function changeNum() {
  //numbers[0] = 5;
  numbers = [5].concat(numbers.slice(1)); // [5, 222, 333]
}

将触发更新

使用 RivetsJS 检测数组的变化

Detecting changes to arrays with RivetsJS

javascript

rivets.js