korrekte Art und Weise Elm mit bestehendem Web-App-Dienst zu integrieren

Question

i einen Backend-Service, die ich in Golang schrieb, so etwas wie diese:

func PageA_RequestHandler(ctx *W.Context) { 
    // init things 
    if is_ajax { 
    // handle the API request, render the JSON 
    return 
    } 
    // query the initial rows 
    values := M.SX{ 
    `rows`: model1.GetRows(10), 
    `columns`: model1.GetColumns(), 
    } 
    // render the html 
    ctx.Render(`page_a_template`,values) 
} 

dann die template Datei page_a_template.html (das geladen und beim ersten Mal zwischengespeichert es gemacht), ist eine hTML-Datei mit Inhalt etwas wie folgt aus:

<div id="grid"></div> 
<script> 
    var rows = {/* rows */}; 
    var cols = [/* columns */] 
    new GridBuilder('grid',cols,rows); 
</script> 

Wo ist:

{/* rows */} und [/* columns */] sind mein Javascript-freundliche Template Syntax, gibt es einige andere Syntax wie: /*! bar */ oder #{yay}

new GridBuilder ist meine benutzerdefinierte JavaScript-Komponente, die so etwas wie datatables.net oder editablegrid.net

Die Frage ist, erzeugt, wenn ich Elm verwenden , was ist der richtige Weg, um die {/* rows */} in das kompilierte HTML zu injizieren?

Answer 1

Verwenden Html.programWithFlags (angenommen Ihr Hauptmodul ist App genannt):

<div id="grid"></div> 
<script> 
    var rows = {/* rows */}; 
    var cols = [/* columns */]; 
    var node = document.getElementById('grid'); 
    Elm.App.embed(node, { rows: rows, cols: cols }); 
</script> 

Dies ist die Art und Weise Sie Ihre Elm App mit verfügbaren Daten initialisieren können wie Sie GridBuilder initialisiert wird. Um diese Werte lesen zu können, sollten Sie einen Flags Alias ​​erstellen und Ihre init Funktion wird es erhalten.

type alias Flags = 
    { rows : [ ... ] 
    , cols : [ ... ] 
    } 

init : Flags -> (Model, Cmd Msg) 
init flags = 
    ... 

Ihre main Funktion wird wie folgt aussehen:

main = 
    Html.programWithFlags 
     { init = init, ... } 

ich sehr empfehlen, dass Sie den JavaScript Interop Abschnitt der Elm Guide lesen. Es erläutert die programWithFlags und andere Ansätze zum Empfangen/Senden von Daten von/zu JavaScript.