0

在“氮气简介”中，有这个例子：

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

然后他们让你添加一个 alert() 的 hello 事件：

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"}
    ]}.

指南将向您展示如何提醒（）在文本框中输入的名称似乎很自然。我试过了：

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 进行操作，因为指南说：

什么是氮作用？

操作可以是 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 属性——这对我来说毫无意义。

4

1 回答 1

0

根据文档：

事件动作 - #event {}
...
在 Javascript 中，您可以使用obj('id')其中 id 是 Nitrogen 元素的 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}
    ]}.

在其他地方，文档说：

trigger - (atom) 将触发此操作的 Nitrogen 元素的 id。自动设置。

target - (atom) 被 obj('me') 引用的 Nitrogen 元素的 id。自动设置。

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

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

但是当我尝试以下代码时没有弹出警报（）：

%% -*- 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') )"

仍然没有弹出警报（）。

于 2018-07-31T16:15:41.330 回答