2

我在客户端 Amber 解决方案中有一个这样的 HTML 表单

<form id="myForm1">
  Creator:  <input type="text" name="creator" />
  <br>
  Title:  <input type="text" name="title" />
  <br>
  Description:  <input type="text" name="description" />
  <br>
  Doctype:  <input type="text" name="doctype" />
  <br>
  Tags:  <input type="text" name="tags" />
</form>

问题

如何遍历表单的所有字段，以便将字段内容放入 Amber 字典，字段名称为键，文本内容为值？

Stephen-Eggermont 和 MKroenert 回答后的新版本问题

如何获取表单的所有字段的值，以便将它们放入 Amber 字典中，字段名称为键，文本内容为值？

还是有一种惯用的方法来创建表单并检索值？

注意：如果这使事情更具可读性，则可以使用 Amber 代码构建表单。

参考

回答后编辑：FileIn 代码

MKroenert 提供的答案工作正常

下面是我测试过的他的代码。它可以直接在工作空间中归档

    Widget subclass: #AmberFormExample
    instanceVariableNames: 'dictionary inputs'
    package: 'TodoList'!

!AmberFormExample methodsFor: 'not yet classified'!

collectValues
    inputs do: [ :each |
        dictionary at: (each asJQuery attr: 'name')
            put: (each asJQuery val).
        ].

Transcript show: dictionary printString
!

initialize
    dictionary := Dictionary new.
    inputs := Array new.
!

renderInput: inputName on: html
    html p: [
        html label with: inputName.
            inputs add: (html input id: inputName;
                name: inputName;
                yourself)]
!

renderOn: html
    inputs removeAll.
    html form id: 'myForm1'; with: [
        #('Creator' 'Title' 'Description' 'Doctype' 'Tags') do: [ :each |
            self renderInput: each on: html]].
    html button
        with: 'Collect Inputfield Values';
        onClick: [
            self collectValues.
            ]
! !
4

2 回答 2

4

我重用了这个 SO question中的代码，并用 Amber 重写了它，以解决您问题的第一部分。以下是遍历所有输入字段的方法：

(('#myForm1 *' asJQuery)
    filter: ':input')
        each: [ :thisArg :index |
            console log: thisArg ] currySelf

这个 Amber 配方是访问 JavaScript 所必需的this。

将输入字段的名称和值打印到 JavaScript 控制台可以这样完成：

(('#myForm1 *' asJQuery)
    filter: ':input')
        each: [ :thisArg :index |
            console log: (thisArg asJQuery attr: 'name').
            console log: (thisArg asJQuery val)] currySelf

将值放入字典中：

| dict |
dict := Dictionary new.
(('#myForm1 *' asJQuery)
    filter: ':input')
        each: [ :thisArg :index |
            dict at: (thisArg asJQuery attr: 'name')
                put: (thisArg asJQuery val)] currySelf

至于问题的第二部分，WebAmber 中有一个包，其中包含用于生成 HTML 页面的类。您所做的是创建一个子类Widget并实现该renderOn: html方法。html作为参数传入的对象具有类型HTMLCanvas，可用于创建如下 HTML 表单：

renderOn: html
    html form with: [
        html input id: 'creator'.
        html input id: 'title'.]

这是一个完整的例子。以它为起点，并意识到它可能不是最有效的做事方式

Widget subclass: #AmberFormExample
    instanceVariableNames: 'dictionary inputs'
    package: 'Examples'

AmberFormExample>>initialize
    dictionary := Dictionary new.
    inputs := Array new.

AmberFormExample>>renderOn: html
    inputs removeAll.
    html form id: 'myForm1'; with: [
        #('Creator' 'Title' 'Description' 'Doctype' 'Tags') do: [ :each |
            self renderInput: each on: html]].
    html button
        with: 'Collect Inputfield Values';
        onClick: [
            self collectValues.
            ]

AmberFormExample>>renderInput: inputName on: html
    html p: [
        html label with: inputName.
            inputs add: (html input id: inputName;
                name: inputName;
                yourself)]

AmberFormExample>>collectValues
    inputs do: [ :each |
        dictionary at: (each asJQuery attr: 'name')
            put: (each asJQuery val).
        ].

在运行的 Amber 实例中实现此类后，可以使用以下代码执行它：

AmberFormExample new appendToJQuery: 'body' asJQuery
于 2015-01-15T18:50:24.877 回答
1

你的表格有很多重复。您可能想看看 HTMLCanvas 以及它是如何在 IDE 中使用的。

您可以添加一个方法renderField: aFieldName on: aCanvas并重复使用 5 次。你看过海边吗？

最终结果应该类似于

renderOn: html
    html form with: [
        #('Creator' 'Title' 'Description' 'Doctype' 'Tags') do: [:each |
            self renderField: each on: html]
于 2015-01-04T01:09:11.523 回答