GET 请求后 DOM 上的属性未更改

Question

我正在开发一个组件来呈现用户详细信息。从 API 请求中获取详细信息并更新属性，但这些更改未反映在 DOM.

上

我工作的公司仍在使用 Polymer 1.2，我很难找到和理解文档。我是否需要从父组件发出获取请求，还是可以直接在组件内部执行此操作？有一些基本的东西我没有掌握这一点，想知道是否有人可以为我阐明它。

谢谢。

模板中的代码段：

<p>{{i18n.GLOBAL_USERNAME}} - [[username]]</p>
<p>{{i18n.GLOBAL_FIRSTNAME}} - [[firstname]]</p>
<p>{{i18n.GLOBAL_LASTNAME}} - [[lastname]]</p>
<p>{{i18n.GLOBAL_EMAIL}} - [[email]]</p>
<p>{{i18n.GLOBAL_NUMBER}} - [[number]]</p>

聚合物函数的片段：

Polymer({
            is: 'my-component',

            properties: {
                username: { 
                    type: String, 
                    value: "n/a",
                },
                firstname: { 
                    type: String, 
                    value: "n/a"
                },
                lastname: { 
                    type: String, 
                    value: "n/a"
                },
                email: { 
                    type: String, 
                    value: "n/a"
                },
                number: { 
                    type: String, 
                    value: "n/a"
                },
            },

            ready: function () {
                var user = app.auth.hasSession()
                if (user !== null) {
                    app.getUserInfo(user.user_id, this._getUserSuccessful, this._getUserFail);
                }
            },

            _getUserSuccessful: function (res) {
                this.username = res.user.user_id
                this.firstname = res.user.firstname
                this.lastname = res.user.lastname
                this.email = res.user.email
                this.number = res.user.phone_number
                console.log("got user details")
            },
            _getUserFail: function () {
                console.log("failed to get user details")
            },
        });

Answer 1

您需要使用 Polymer setter methods 而不是简单的赋值。

这是一个例子：

_getUserSuccessful: function (res) {
  this.set('username', res.user.user_id)
  this.set('firstname', res.user.firstname)
  this.set('lastname', res.user.lastname)
  this.set('email', res.user.email)
  this.set('number', res.user.number)
  console.log("got user details")
},

数据绑定属性需要使用 setter and/or 数组修改器方法，否则 Polymer 无法知道某些内容已更改以更新绑定。

我真的建议您在继续使用 Polymer 1.x 进行任何类型的工作之前阅读整篇 Data system concepts 文章。

GET 请求后 DOM 上的属性未更改

Properties not changing on the DOM after a GET request

polymer-1.0