Question

在“氮的介绍”中，有以下示例：

body() -> 
    #panel { style="margin: 50px;", body=[
        #h1 { text="My Page" },
        #label { text="Enter Your Name:" },
        #textbox { },
        #button { id=mybutton, text="Submit" }
    ]}.

然后他们让您添加一个警报（）的事件：

body() ->
    [
        #button { text="Submit", actions=[
          #event{type=click, actions=#alert { text="Hello" } 
        ]}
    ].

所以我想到了这个：

%% -*- mode: nitrogen -*-
%% vim: ts=4 sw=4 et
-module (my_page).
-compile(export_all).
-include_lib("nitrogen_core/include/wf.hrl").
-include("records.hrl").

main() -> #template { file="./site/templates/bare.html" }.

title() -> "Hello from my_page.erl!".

body() -> 
    wf:wire(#event{
        type=click,
        trigger=mybutton,
        actions="alert('hello')"
    }),
    #panel{ style="margin: 50px;", body=[
        #h1{ text = "My Simple App..." },
        #label{ id=mylabel, text="Enter your name:"},
        #textbox{ id=mytextbox },
        #button{ text="Submit", id="mybutton"}
    ]}.

该指南将向您展示如何对文本框中输入的名称进行Alert（）听起来很自然。我尝试过：

body() -> 
    wf:wire(#event{
        type=click,
        trigger=mybutton,
        actions="alert(obj('mytextbox').text)"
    }),
    #panel{ style="margin: 50px;", body=[
        #h1{ text = "My Simple App..." },
        #label{ id=mylabel, text="Enter your name:"},
        #textbox{ id=mytextbox },
        #button{ text="Submit", id="mybutton"}
    ]}.

...但是alert（）表示undefined。我什至找不到obj()函数的文档。

我也尝试使用纯js进行操作，因为the guide says：

什么是氮作用？

动作可以是Javascript或呈现为   Javascript。

body() -> 
    wf:wire(#event{
        type=click,
        trigger=mybutton,
        actions="alert(document.getElementById('mytextbox').innerHTML)"
    }),
    #panel{ style="margin: 50px;", body=[
        #h1{ text = "My Simple App..." },
        #label{ id=mylabel, text="Enter your name:"},
        #textbox{ id=mytextbox },
        #button{ text="Submit", id="mybutton"}
    ]}.

但是，不会弹出alert（）。有人可以帮忙吗？

编辑： 好吧，当我查看页面源代码时，html如下所示：

<input type="text" class="wfid_temp182655 wfid_mytextbox textbox" value="" />
<input type="button" value="Submit" class="wfid_temp182684 wfid_mybutton button" />

我注意到，即使按钮和文本框记录具有id字段，氮气也不会为这些html元素设置id属性-这对我来说毫无意义。

Answer 1

根据the docs：

事件操作-#event {}
  ...
  在Javascript中，您可以使用obj('id')，其中id是   氮元素。您还可以使用obj('me')来引用目标   当前动作。

结合使用value属性（而不是textContent或innerHTML属性，是的，我的js很生锈！）可以与obj('mytextbox')结合使用：

body() -> 
    wf:wire(#event{
        type=click,
        trigger=mybutton,
        actions="alert( obj('mytextbox').value )"
    }),
    #panel{ style="margin: 50px;", body=[
        #h1{ text = "My Simple App..." },
        #label{ id=mylabel, text="Enter your name:"},
        #textbox{ id=mytextbox },
        #button{ text="Submit", id=mybutton}
    ]}.

在其他地方，the docs说：

触发-（原子）将触发该操作的氮元素的ID。自动设置。

目标-（原子）obj（'me'）要引用的氮元素的ID。自动设置。

因此，如果我将目标设置为“ mytextbox”，那么我应该能够写：

"alert( obj('me').value )"

但尝试以下代码时不会弹出alert（）

%% -*- mode: nitrogen -*-
%% vim: ts=4 sw=4 et
-module (my_page).
-compile(export_all).
-include_lib("nitrogen_core/include/wf.hrl").
-include("records.hrl").

main() -> #template { file="./site/templates/bare.html" }.

title() -> "Hello from my_page.erl!".

body() -> 
    wf:wire(#event{
        type=click,
        trigger=mybutton,
        target=mytextbox,
        actions="alert( obj('me').value )"
    }),
    #panel{ style="margin: 50px;", body=[
        #h1{ text = "My Simple App..." },
        #label{ id=mylabel, text="Enter your name:"},
        #textbox{ id=mytextbox },
        #button{ text="Submit", id=mybutton}
    ]}.

如果我尝试：

actions="alert( obj('me') )"

仍然不会弹出alert（）。

如何使按钮alert（）成为文本框的文本？

1 个答案: