更新聚合物 JS 中的属性值时面临的问题

Question

我正在使用 Polymer js 创建一个非常简单的 CRUD 应用程序，但在编辑记录时遇到了一些问题。

这是添加/编辑的代码：

        _addTodo() {
            if(this.user.id) {
                let foundIndex = this.users.findIndex( x => x.id === this.user.id);
                this.users[foundIndex] = this.user;

                this.set('users', this.users);

                console.log(this.users);
            }
            else {
                this.user.id = Math.floor((Math.random() * 100000) + 1);
                this.push('users', this.user);
            }
            this.user = {};
        }

虽然我可以看到用户对象中的值在浏览器控制台中发生了变化，但在 DOM/UI 中并没有发生变化。

如果我使用像下面这样的静态用户对象，那么它可以工作：

        _addTodo() {
            if(this.user.id) {

                var users = [
                        {
                            id: 1,
                            name: 'xyz',
                            age: 21
                        },
                        {
                            id: 2,
                            name: 'xyz123',
                            age: 5
                        }
                    ]

                this.set('users', users);

                console.log(this.users);
            }
            else {
                this.user.id = Math.floor((Math.random() * 100000) + 1);
                this.push('users', this.user);
            }
            this.user = {};
        }

即使我使用了“notifyPath”而不是“set”，但这也不起作用。

谁能建议我在这里做错了什么，用户对象在 DOM 中没有改变？

更新：

如下所示，我正在使用 splice 来更新数组，但仍然无法正常工作。

JSfiddle - https://jsfiddle.net/ansumanmishra/8490y4q8/1/

Answer 1

   this.users[foundIndex] = this.user;

   this.set('users', this.users);

更新 DOM 需要性能。每当使用set 时，Polymer 都会检查数组中的每个值，但是您已经将数组设置为它的新值，因此当它比较时（基本上，它与自身比较），Polymer 不会检测到任何更新，因此不会更新DOM。

但是，您不能将其作为解决方案：var newUserArr = this.users，然后修改 newUserArr，因为对象和数组只会创建相互引用。

var a = [1]
var b = a

b[0] = 2

console.log(a) // gives [2]

你最终只会得到与上面相同的结果：Polymer 自己对数组进行脏检查。使用 JSON.stringify 删除引用，然后设置新数组。我一直用这个方法。

        if(this.user.id) {
            let foundIndex = this.users.findIndex( x => x.id === this.user.id);

              // Remove references
            var newUserArr = JSON.parse(JSON.stringify(this.users)));

            newUserArr[foundIndex] = this.user;

            this.set('users', newUserArr);
        }

---

编辑

但是，当您想要编辑某些内容时，还从数组中的对象创建一个引用，因此当您输入输入时，您将更新现有数组中的对象@987654329 @。

我摆弄了你的小提琴，现在它可以工作了。我所做的是在方法_editUser()中也添加了JSON.parse(JSON.stringify())。

http://jsfiddle.net/c6h2hwch/

Answer 2

来自"Set a property or subproperty by path"：“在对象属性上调用 set 不会导致 Polymer 获取对象子属性的更改，除非对象本身发生更改。”注解示例：

// DOES NOT WORK
this.profile.name = Alex;
this.set('profile', this.profile);

您需要将this.profile 替换为新的profile 对象，或者更新profile 的每个单独成员的路径。

Answer 3

这不是可观察到的变化：

this.users[foundIndex] = this.user;
this.set('users', this.users);

您正在修改 this.users 指向的数组（以 Polymer 无法检测的方式），然后将 this.users 设置为同一个数组 - this.set('users', this.users) 与 this.users = this.users 的操作相同。

您有几个选择。一种是使用this.splice：

this.splice('users', foundIndex, 1, this.user);

这表示，“删除foundIndex 处的1 项目并在其位置插入this.user。

另一个选项是创建数组的副本（使用Array.prototype.slice——注意这是slice，而不是splice）以使更改可观察：

const nextUsers = this.users.slice();
nextUsers[foundIndex] = this.user;
this.users = nextUsers;

我推荐this.splice，因为它不会让 Polymer 在重新渲染时做很多工作，例如数组的dom-repeat。