Aktualisieren von Polymer-Komponente mit Daten von außerhalb der Komponente

Question

Dies sollte eine ziemlich normale Aufgabe sein, und doch fehlt mir etwas.

Ich versuche Socket.io mit Polymer zu integrieren [mit der Chat-Anwendung] - Entscheidung, die MessageList und die einzelnen messageItem als Polymer-Komponenten zu ändern. SocketIo legt ein customEvent offen, das vom Server ausgelöst werden soll. Die Nachricht wird als Daten gesendet, die dann einer Eigenschaft des benutzerdefinierten Elements zugewiesen wird.

Dies ist das 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> 

Auf der index.html-Seite -

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

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

    }); 

Mit all dies .. Jedesmal, wenn ein Client sendet eine Nachricht, die self.messages - Beiträge die Gesamtmenge von Nachrichten, aber die "_messageListChanged" der benutzerdefinierten Elemente wird nur beim ersten Mal aufgerufen.

Es gibt ähnliche Fragen - Updating a polymer element property with data from API call

jedoch die Daten durchsucht werden, funktioniert nur zum ersten Mal. Auch ich würde es gerne ohne Ajax-Eisen und so machen können.

Answer 1

versuchen Sie bitte reflectToAttribute:true zu Ihrer MessageList-Eigenschaft hinzuzufügen.

wenn Sie nicht noch es versuchen bekommen gelöst dieser

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

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

Grunde so könnte der JavaScript-Array Push oder Scheibe wird schmutzig Überprüfung

in Polymers nicht refelect wenn Sie unten Code in einer Polymerkomponente verwenden. Sie müssen folgen Array-Änderungen des Polymers wie

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; 

    }); 

Answer 2

Das Problem ist, dass Sie Push verwenden. Polymer hat seine eigene Push-Funktion. Der reguläre Push löst nicht die Beobachter und alle Änderungsereignisse aus.

this.push('array',value) 

Aber für Sie, können Sie es wie folgt lösen:

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


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

}); 

Die Scheibe wird neues Array erstellen. Und es wird alle Änderungen im Array auslösen.

Answer 3

Zusätzlich zur Verwendung der Polymer API for array mutations (wie Alon in seiner Antwort darauf hingewiesen hat), müssen Sie einen Beobachter für array mutations installieren. Der Beobachter, den Sie jetzt haben, wird nur ausgelöst, wenn Sie eine neue Array-Instanz zuweisen, aber nicht, wenn Sie Elemente aus Ihrem Array hinzufügen oder entfernen.

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

Beachten Sie, dass diese Art von Beobachter ein einzelnes Argument, eine Änderungsaufzeichnung nimmt.

Ihre Beobachtermethode sollte ein einzelnes Argument akzeptieren. Wenn Ihre Beobachtermethode aufgerufen wird, erhält sie eine Änderungsaufzeichnung der Mutationen, die im Array aufgetreten sind.