3

有没有办法让 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>
4

1 回答 1

1

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

使用您的原始代码，您希望在回发中捕获的任何表单元素都必须具有 class 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 完全忽略（目前，无论如何），因此可以安全地删除它。

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

  1. 氮气中的传统方式：wf:wire(button_id, #event{type=click, postback=login})，或

  2. 使用 #api 操作，以及一些 javascript，这应该允许您使用postbackHTML 属性：

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

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

然后，使用 javascript 扫描 DOMpostback=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])}).

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

于 2020-11-26T16:32:27.763 回答