go - 将 Elm 与现有网络应用服务集成的正确方法

Question

我有一个用 Golang 编写的后端服务，如下所示:

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)
}

然后是 template文件 page_a_template.html(在首次呈现时加载和缓存)是一个 html 文件，内容如下:

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

在哪里:

{/* rows */} 和 [/* columns */] 是我的 javascript 友好模板语法，还有一些其他语法，如:/*! bar */ 或 #{yay}

new GridBuilder 是我的自定义 javascript 组件，它创建类似 datatables.net 或 editablegrid.net

的内容

问题是，如果我使用 Elm，将 {/* 行 */> 注入(inject)编译后的 html 的正确方法是什么？

Answer 1

使用Html.programWithFlags (假设您的主模块名为 App):

<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>

这是您可以使用可用数据初始化 Elm 应用程序的方法，就像您初始化 GridBuilder 一样。

为了能够读取这些值，您应该创建一个 Flags 类型别名，您的 init 函数将接收它。

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

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

您的 main 函数将如下所示:

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

我强烈建议您阅读 JavaScript Interop节Elm Guide .它解释了 programWithFlags 和其他从 JavaScript 接收/发送数据的方法。