Question

我是RivetsJS的新用户，我正在尝试弄清楚当数组元素修改时如何让我的绑定刷新。当使用简单赋值时，铆钉似乎能够检测到非复杂变量的变化（即player_lives -= 1）。它还检测I 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 }绑定并继续显示原始值。我怀疑铆钉无法发现变化正在发生，但我不确定采取哪种最佳方法来解决这个问题。有什么建议吗？

Answer 1

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

但是，它确实检测到对数组的引用何时更改。

因此，一个解决方案是触发引用更改，在您的示例中，类似

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

将触发更新

使用RivetsJS检测阵列的更改

1 个答案: