使用 Erlang Nitrogen 和 Bootstrap 4 模板答案

【问题标题】：Using Erlang Nitrogen and Bootstrap 4 Templates使用 Erlang Nitrogen 和 Bootstrap 4 模板
【发布时间】：2020-08-01 11:53:00
【问题描述】：

有没有办法让 bootstrap 4 设计的网页（作为 Nitrogen 模板）与 Erlang Nitrogen “交互”？

除了拆分所有输入字段、按钮和表单并将其转换为 Nitrogen 之外，是否可以保持设计的 HTML 页面完整并添加标签以告诉 Non 在呈现时对按钮执行回发事件，或者访问字段的内容？

例如，这是设计的引导程序代码，我想让回发由 Nitrogen 处理。（页面中包含所有需要的javascript和css，网页是调用的Nitrogen模块的模板）。

<form class="form-horizontal m-t-20 " id="loginform" name="loginform" method="POST" action="#">
  <div class="input-group mb-3 ">
    <div class="input-group-prepend ">
      <span class="input-group-text " id="basic-addon1 "><i class="ti-user "></i></span>
    </div>
    <input type="text " class="form-control form-control-lg " placeholder="Username " aria-label="Username " aria-describedby="basic-addon1 " id="login_username">
  </div>
  <div class="form-group text-center ">
    <div class="col-xs-12 p-b-20 ">
      <button class="btn btn-block btn-lg btn-info " type="submit" postback=login>Log In</button>
    </div>
  </div>

【问题讨论】：

标签： bootstrap-4 erlang nitrogen

【解决方案1】：

这是一个有趣的想法。只需极少的更改即可实现这一目标。

使用您的原始代码，您希望在回发中捕获的任何表单元素都必须具有 wfid_ELEMENT_ID 类。

例如：

<input type="text"
       class="form-control form-control-lg wfid_login_username" 
       placeholder="Username"
       aria-label="Username"
       aria-describedby="basic-addon1"
       id="login_username">

（注意课堂上的wfid_login_username）。

此外，<form> 元素将被 Nitrogen 完全忽略（目前，无论如何），因此可以安全地删除它。

然后要进行回发，您有两种选择：

氮气中的传统方式：wf:wire(button_id, #event{type=click, postback=login})，或
使用#api 操作和一些javascript，这应该可以让您摆脱使用postback HTML 属性：

首先，连接#api 操作（API 文档：https://nitrogenproject.com/doc/action_api.md）

wf:wire(#api{name=myapi}).

然后，使用 javascript 扫描 DOM 以查找 postback=SOMETHING 并连接相关的 page.myapi 调用。

$('[postback]').each(function(i, e) {
    var pb = $(e).attr("postback");
    $(e).on("click", function() { page.myapi(pb) });
});

最后，为您的 api 构建处理函数：

api_event(myapi, _, PostbackString) ->
    wf:wire(#alert{text=wf:f("Your postback was: ~p", [PostbackString])}).

当然，这样做会失去很多回发的功能，因为回发可以安全地包含元组、地图等复杂的术语 - 这种方法实际上只会回发附加到postback HTML 属性的字符串。但它应该适用于像这样的简单接口。

【讨论】：