使用组件外部的数据更新聚合物组件 [英] Updating Polymer Component with data from outside the component

问题描述

这应该是一个很正常的任务，但是我缺少一些东西.

This should be a pretty normal task , and yet i am missing something .

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

I am trying to integrate Socket.io with Polymer [ using the chat application ] - Deciding to change the MessageList and the individual messageItem as Polymer components . SocketIo exposes a customEvent to be thrown from server , which sends the message as data , which then is being assigned to a property on the custom element .

这是MessageList元素.

This is the MessageList element .

<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页面上-

On the index.html Page -

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"仅在第一次被调用.

With all of this.. Anytime a client sends a message , the self.messages - posts the total set of messages , but the "_messageListChanged" of the custom elements gets called only the first time .

还有类似的问题-更新聚合物元素属性以及来自API调用的数据

但是，分配数据只能在第一次使用. 我也希望能够不使用ajax-iron和东西而做到这一点.

However assigning the data , works only for the first time . Also i would like to be able to do it without using ajax-iron and stuff .

推荐答案

除了使用

In addition to using the Polymer API for array mutations (as Alon has pointed out in his answer), you need to install an observer for array mutations. The observer you have now will only fire when you assign a new array instance, but not when you add or remove elements from your array.

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

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

Note that this kind of observer takes a single argument, a change record.

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

Your observer method should accept a single argument. When your observer method is called, it receives a change record of the mutations that occurred on the array.

这篇关于使用组件外部的数据更新聚合物组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！