这应该是一项非常正常的任务，但我缺少了一些东西。
我正在尝试将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"。
还有类似的问题-使用API调用的数据更新聚合物元素属性
但是，指定数据仅在第一次使用时有效。此外，我希望能够做到这一点，而不使用ajax铁和其他东西。
除了使用Polymer API进行阵列突变(正如Alon在回答中指出的那样(，您还需要安装阵列突变观察员。现在的观察器只会在分配新数组实例时激发，而不会在添加或删除数组中的元素时激发。
properties : {
messageList : {
type : Array,
value : function() {
return [{'inputMessage' : 'Welcome to the Chat' ,
'nickName' : 'System' , 'msgTime' : new Date()}]
}
}
},
observers: [
'_messageListChanged(messageList.splices)'
],
注意，这种观察者只接受一个参数，一个变更记录。
您的观察者方法应该接受一个单独的参数。当您的observer方法被调用时，它会收到数组上发生的突变的更改记录。
问题是您使用了push。聚合物有自己的推动功能。常规推送不会触发观察者和所有更改事件。
this.push('array',value)
但对你来说，你可以这样解决：
var self = this;
socket.on('chatMessage' , function(msg) {
self.messages.push(msg);
document.querySelector('message-list').messageList = self.messages.slice();
});
切片将创建新的数组。它将触发数组中的所有更改。
reflectToAttribute:true添加到messageList属性中。
如果你仍然没有解决它，试着这样这个
self.myimmutedArray JSON.parse(JSON.stringify(self.messages))
document.querySelector('message-list').messageList = self.myimmutedArray; 之前
原因可能是javascript数组推送或切片不会在聚合物的脏检查中重新选择
如果您在聚合物组件中使用以下代码。你必须像一样跟踪聚合物的阵列变化
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;
});