使用Erlang N2和Bootstrap 4模板

Question

有没有办法让bootstrap 4设计的网页(作为氮气模板)与Erlang氮气“互动”？

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

例如，这是设计的bootstrap代码，我想让回发由N来处理。(所有必需的javascript和css都包含在页面中，web页面是名为N2模块的模板)。

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

Answer 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>元素将被氮气完全忽略(至少在当前情况下)，因此可以安全地删除它。

然后，要执行回发，您有两个选择：

氮气中的传统

1. 方式：wf:wire(button_id, #event{type=click, postback=login})，或

1. 使用#api操作，使用一些javascript，它应该允许您使用postback HTML属性：

首先，连接#api action (接口文档：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属性的字符串。但它应该适用于像这样的简单接口。