使用Erlang氮和Bootstrap 4模板

mrzz3bfm  于 2022-12-08  发布在  Erlang
关注(0)|答案(1)|浏览(102)

有没有办法让bootstrap 4设计的网页(作为氮气模板)与Erlang氮气“互动”?
除了分解所有输入字段、按钮和表单并将其转换为Nitrogen之外,是否可以保持设计的HTML页面不变,并添加标记来告诉Nitrogen在呈现时对按钮执行回发事件,或者访问字段的内容?
这是设计的引导代码的例子,我想有回发由氮气处理。(所有需要的javascript和css都包含在页面中,网页是氮气模块的模板调用)。

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

irlmq6kh1#

这是一个有趣的想法。用最小的改动就可以实现。
使用原始代码,您希望在回发中捕获的任何窗体元素都必须具有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">

(note wfid_login_username)。
此外,<form>元素将被氮气完全忽略(无论如何,在目前),所以它可以安全地被删除。
然后,若要执行回传,您有两个选项:
1.氮气的传统方法:wf:wire(button_id, #event{type=click, postback=login}),或
1.使用#API操作,并使用一些javascript,这样您就不必使用postback HTML属性:
首先,将#API操作(API文档:(第10页)

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

然后,使用javascript扫描postback=SOMETHING的DOM,并连接相关的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])}).

当然,这样做会损失很多回发功能,因为回发可以安全地封装元组、Map等复杂的术语--这个方法实际上只回发附加到postback HTML属性的字符串。

相关问题