これはかなり正常な作業でなければなりません。コンポーネントの外部からのデータを使用してポリマーコンポーネントを更新する
私はSocket.ioをPolymer [chatアプリケーションを使用して]と統合しようとしています - 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やstuffを使わずにやりたいと思っています。
すべてのチャットメッセージに 'self.messages.slice()'を使用することは非常に非効率的で、長時間の会話にはコストがかかる可能性があります。 – tony19
これは非常に非常に長い配列の場合にのみ当てはまります。1000オブジェクトの配列をスライスするのにかかる時間を見てください。ポリマーのプッシュを使って解決策を書いたければ... – Alon
私が行ったことは、 (JSから呼び出される)要素上で、あなたが言及した突然変異方法を使用して、新しいメッセージを取り出し、それをmessageListにプッシュします。それで今はうまくいく。 –