Bootstrap 4 使用Erlang氮气和Bootstrap 4模板

是否有一种方法允许Bootstrap4设计的网页（作为氮模板）与Erlang氮“交互”

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

例如，这是设计的引导代码，我希望使用氮气处理回发。（所有必需的javascript和css都包含在页面中，web页面是名为的模块的模板）

登录

这是一个有趣的想法。这是有可能实现这一点与最小的变化

使用原始代码，要在回发中捕获的任何表单元素都必须添加到类

wfid\u ELEMENT\u ID

例如：

（注意类中的wfid\u login\u username）

此外，

元素将完全被氮气忽略（无论如何，在当前情况下），因此可以安全地将其移除

然后，要进行回发，您有两个选项：

氮气中的传统方式：

wf:wire（按钮id，#事件{type=click，postback=login}）

，或

使用#api操作和一些javascript，这些javascript应该允许您使用

postback

HTML属性：

首先，连接#api操作（api文档：）

wf:wire（#api{name=myapi}）。 然后，使用javascript扫描DOM中的

postback=SOMETHING

，并连接相关的

page.myapi

调用

$（“[postback]”）。每个（函数（即，e）{
var pb=$（e）.attr（“回发”）；
$（e）.on（“单击”，function（）{page.myapi（pb）}）；
});

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

api\u事件（myapi，\u，PostbackString）->
wf:wire（#alert{text=wf:f（“您的回发是：~p，[PostbackString]））。

当然，这样做会丢失很多回发功能，因为回发可以安全地包装元组、映射等复杂术语-此方法实际上只回发附加到

postback

HTML属性的字符串。但它应该适用于这样的简单接口

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