我在客户端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代码构造表单。
参考资料
https://github.com/amber-smalltalk/amber/wiki/FAQ#how-do-i-get-the-text-value-of-an-input-field
http://api.jquery.com/each/
答案后编辑：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.
]
! !
最佳答案
我重用了this SO question中的代码，并在Amber中重新编写了代码，以解决您的问题的第一部分。
这是您遍历所有输入字段的方式：
(('#myForm1 *' asJQuery)
filter: ':input')
each: [ :thisArg :index |
console log: thisArg ] currySelf
必须使用This Amber recipe才能访问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
至于问题的第二部分，Amber中有一个
Web包，其中包含用于生成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