如何在聚合物中使用 jQuery 动态更改数组？

Question

我有一些 HTML 包含这样的

<iron-list is="dom-repeat" items="[[userList]]" as="user">
    <paper-checkbox class="styled sizeCheckbox">
        <div class="primary">[[user.userName]]</div>
    </paper-checkbox> 
</iron-list>

在我的 js 文件中，我正在更新 "userList" 数组。

if (event.target.checked) {
    this.userList.push(event.target.value);
} else {
    var index = this.userList.indexOf(event.target.value);
    this.userList.splice(index, 1);
}

当我更新数组中的值时，它不会直接反映 "userList" 数组中的值，我们如何在不刷新页面的情况下更新它？

Answer 1

根据 Polymer documentation 你应该总是更喜欢使用

this.push('userList', data);

而不是

this.userList.push(data);

Answer 2

使用 Polymer 的数组变异方法对数组进行可观察到的更改。 https://www.polymer-project.org/1.0/docs/devguide/model-data#work-with-arrays

请更新您的代码：

if (event.target.checked) {
    this.push('userList', event.target.value);
} else {
    var index = this.userList.indexOf(event.target.value);
    this.splice('userList', index, 1);
}

希望这篇Demo可以帮到你。

如何在聚合物中使用 jQuery 动态更改数组？

How to dynamically change array using jQuery in polymer?

javascript

arrays

jquery

web-component

polymer