使用组件外部的数据更新聚合物组件

Question

这应该是一个非常正常的任务，但我错过了一些东西。

我正在尝试将 Socket.io 与 Polymer 集成 [使用聊天应用程序] - 决定将 MessageList 和单个 messageItem 更改为 Polymer 组件。 SocketIo 公开了一个要从服务器抛出的 customEvent，服务器将消息作为数据发送，然后将其分配给自定义元素上的属性。

这是 MessageList 元素。

<link rel="import" href="/polymer/polymer.html">
<link rel="import" href="message.html">

<dom-module id='message-list'>
<template>

    <style>

    </style>

    <ul id="messages">
        <template is='dom-repeat' items="{{messageList}}" is="auto-binding">
            <li>
                <message-item message = "{{item}}"></message-item>
            </li>
        </template>
    </ul>

</template>
<script>
    var messageListElement = Polymer({
        is : 'message-list',
        properties : {
            messageList : {
                type : Array,
                observer: '_messageListChanged',
                reflect : true ,
                value : function() {
                    return [{'inputMessage' : 'Welcome to the Chat' , 
                    'nickName' : 'System' , 'msgTime' : new Date()}]
                }
                //, notify : true
            }
        },

        _messageListChanged: function(newValue , oldValue) {
            console.log("Data changed");
        },

        created : function() {
            console.log("messagelist created");
        },

        ready : function() {
            console.log("messagelist ready");
        },

        attributeChanged : function() {
            console.log("messagelist attributeChanged");
        }
    });
</script>

在 index.html 页面上 -

var self = this;
socket.on('chatMessage' , function(msg) {
        self.messages.push(msg);
        console.log(self.messages);

        document.querySelector('message-list').messageList = self.messages;

    });

所有这一切.. 每当客户端发送消息时，self.messages - 发布全部消息集，但自定义元素的“_messageListChanged”仅在第一次被调用。

有类似问题-Updating a polymer element property with data from API call

但是，分配数据，仅适用于第一次。 我也希望能够在不使用 ajax-iron 和其他东西的情况下做到这一点。

Answer 1

除了使用Polymer API for array mutations（正如Alon 在他的回答中指出的那样）之外，您还需要为array mutations 安装一个观察者。您现在拥有的观察者只会在您分配新的数组实例时触发，但不会在您从数组中添加或删除元素时触发。

    properties : {
        messageList : {
             type : Array,
             value : function() {
                return [{'inputMessage' : 'Welcome to the Chat' , 
                'nickName' : 'System' , 'msgTime' : new Date()}]
            }
        }
    },
    observers: [
        '_messageListChanged(messageList.splices)'
    ],

请注意，这种观察者只接受一个参数，即更改记录。

您的观察者方法应该接受一个参数。当您的观察者方法被调用时，它会接收到数组上发生的突变的更改记录。

Answer 2

问题是您使用推送。聚合物有自己的推送功能。定期推送不会触发观察者，以及所有的变化事件。

this.push('array',value)

但对你来说，你可以这样解决：

var self = this;
socket.on('chatMessage' , function(msg) {
    self.messages.push(msg);


    document.querySelector('message-list').messageList = self.messages.slice();

});

切片将创建新数组。并且会触发数组中的所有变化。

Answer 3

请尝试将reflectToAttribute:true 添加到您的 messageList 属性中。

如果你还没有解决，试试这个

self.myimmutedArray JSON.parse(JSON.stringify(self.messages))

document.querySelector('message-list').messageList = self.myimmutedArray;之前

原因可能是 javascript 数组 push 或 slice 不会反映在聚合物的脏检查中

如果您在聚合物组件中使用以下代码。您必须遵循聚合物的阵列变化，例如

this.push('messages', {title:'hey'});

var self = this;
socket.on('chatMessage' , function(msg) {
        self.messages.push(msg);
        console.log(self.messages);

        document.querySelector('message-list').messageList = self.messages;

    });