2016-04-15 8 views
0

Zuerst möchte ich sagen, dass ich neu in der Webentwicklung bin, also kann ich ein falsches Vokabular verwenden.Update-Ansicht (Mithriljs) vom Server (playframework)

Ich möchte eine Aktion von meinem Server initiieren, um Datenbankänderungen an den Client zu senden, um die Ansicht zu aktualisieren.

Ich versuche, das SPA (Single Page Application) Modell zu respektieren, so dass alle meine Ansicht von Mithriljs generiert werden.

Ich werde einige externe Änderungen an meiner Datenbank haben, was wäre der beste Weg, um meine Ansicht zu aktualisieren, ohne den Browser zu aktualisieren?

Ich benutze playframework auf der Serverseite.

+1

Ich bin nicht vertraut mit Mithriljs - Funktioniert es ähnlich wie Angular, wo die Ansicht automatisch aktualisiert wird, wenn das zugrunde liegende Modell aktualisiert wird? Wenn ja, können Sie natürlich eine WebSocket-Verbindung herstellen - Ihre Play App überträgt Daten an den Client -> Daten werden in das Modell eingefügt -> Ansicht wird entsprechend dem Modell aktualisiert – Anton

+0

Ja, das funktioniert so. Danke für deine Antwort. Ich werde WebSocket betrachten. Empfehlen Sie eine spezielle Bibliothek für Websocket in Javascript? – GermainGum

+0

Nun, wenn Mithriljs eine Komponente dafür hat, kann man sie natürlich verwenden. Aber selbst wenn nicht - WebSocket-Verbindungen können in wenigen Zeilen in einfachem JavaScript implementiert werden - siehe hier: http://www.websocket.org/echo.html - Sie können dies auch verwenden, um Ihre Server-Seite zu testen – Anton

Antwort

1

Es ist sehr einfach, Mithril mit jeder Push-Technologie zu verwenden. Wie von Anton erwähnt, können Sie eine einfache WebSocket-Verbindung herstellen und auf Daten in einer Funktion warten. Dann bearbeiten Sie es, aktualisieren Sie Ihre Datenmodelle, und wenn alles in Ordnung ist, rufen Sie einfach m.redraw und es ist fertig. Etwas wie folgt aus: (am Beispiel bei https://www.websocket.org/echo.html)

// A simple model, an array of messages: 
var messages = m.prop([]); 

function onMessage(evt) { 
    var message = evt.data; 
    // Some validation, only strings allowed 
    if (typeof message === 'string' || message instanceof String) { 
     messages().push(message); 
     // All ok, redraw 
     m.redraw(); 
    } 
} 

Dann Ihre mithril Ansicht wird wie folgt aussehen:

var WebSocketMessages = { 
    view: function() { 
     m("ul", messages().map(function(message) { 
      return m("li", message); 
     })) 
    } 
} 

Und es anzuzeigen:

m.mount(document.body, WebSocketMessages);