Свойства не изменяются в DOM после запроса GET

Question

Я работаю над компонентом для отображения пользовательских данных.Детали извлекаются из запроса API, а свойства обновляются, но эти изменения не отражаются в DOM.

Компания, в которой я работаю, все еще использует Polymer 1.2, и у меня возникают трудности с поиском и пониманием документации.Нужно ли делать запрос get от родительского компонента или это можно сделать прямо внутри компонента?Есть кое-что фундаментальное, что я не понимаю в этом и задаюсь вопросом, может ли кто-то пролить на меня немного света.

Спасибо.

Фрагмент из шаблона:

<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

Вам нужно использовать Методы установки полимеров вместо простого назначения.

Вот пример:

_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")
},

Использование методов-установщиков и / или методов-мутаторов массивов требуется для свойств, связанных с данными, в противном случае Polymer не может знать, что что-то изменилось, чтобы обновить привязки.

Я бы действительно предложил вам прочитать всю статью Концепции систем данных , прежде чем приступить к выполнению каких-либо работ с Polymer 1.x.