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>

其中＆＃39; S：

{/* 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, ... }

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

将Elm与现有Web应用服务

1 个答案: