Question

所以，我有一个氮页面index.erl，其中包含如下代码：

body() ->
  [#table{
     id = mytable,
     rows=[
           #tablerow{
              cells=[#tableheader{text="column a"},
                     #tableheader{text="column b"},
                     #tableheader{text="column c"},
                     #tableheader{text="column d"}]
             },
           #custom_row{ %% just a wrapper around #tablerow
              column_a = "a",
              column_b = "b",
              column_c = "c",
              column_d = "d"
             }
           %% ... more #custom_rows omitted
          ]
     },
   #button{text="submit", postback=store_table}
  ].

event(store_table) ->
  TableData = something_like_querySelector(mytable),
  insert_into_database(TableData).

如何获取mytable的内容，氮气是否有类似querySelector的内容？

Answer 1

没有像querySelector那样漂亮和干净的东西，但是可以通过使用Nitrogen #api{} action来检索任意DOM元素的内容。

使用上面的代码，我们可以执行以下操作：

body() ->
  wf:wire(#api{name=send_table_contents, tag=some_tag}),
  [#table{
     id = mytable,
     rows=[
           #tablerow{
              cells=[#tableheader{text="column a"},
                     #tableheader{text="column b"},
                     #tableheader{text="column c"},
                     #tableheader{text="column d"}]
             },
           #custom_row{ %% just a wrapper around #tablerow
              column_a = "a",
              column_b = "b",
              column_c = "c",
              column_d = "d"
             }
           %% ... more #custom_rows omitted
          ]
     },
   #button{text="submit", click="page.send_table_contents(objs('mytable').html())"}
  ].

api_event(send_table_contents, some_tag, [TableHTML]) ->
  insert_into_database(TableHTML).

它不像使用wf:q那样可以请求内容一样干净，但确实可以完成工作。

此处的快速说明是#api{}操作会在名为page.api_name_attribute的页面上创建一个新功能（因此，如果您查看上面的内容，您会看到名称属性为{{1} send_table_contents中调用的javascript函数也是#button.click。然后在send_table_contents回发函数中捕获内容。

也就是说，我已将此功能添加到待办事项列表中，因为它看起来很有用。

氮获得表的内容

1 个答案: