将Elm与现有Web应用服务集成的正确方法

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

然后模板文件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,注入{/* rows */}编译的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, ... }

我强烈建议您阅读Elm指南的JavaScript Interop部分.它解释了从/向JavaScript接收/发送数据的其他方法.programWithFlags