如何用最优雅的方式暂时存储一个字符串值数组在表单中?
我有一个表单,用户可以编辑文章并添加标签,这些标签只是字符串值。
我不想在用户保存整篇文章之前将其持久化,因此我需要能够暂时地执行以下操作:
- 显示已选择的标签列表
- 向列表中添加标签
- 从列表中删除标签
- 在保存表单时提交值列表
我可以把所有内容都存储在一个逗号分隔的隐藏字段中,但这似乎很丑陋,我更喜欢一些强类型的方式。
正确的做法是什么?非常欢迎提供示例。
如何用最优雅的方式暂时存储一个字符串值数组在表单中?
我有一个表单,用户可以编辑文章并添加标签,这些标签只是字符串值。
我不想在用户保存整篇文章之前将其持久化,因此我需要能够暂时地执行以下操作:
我可以把所有内容都存储在一个逗号分隔的隐藏字段中,但这似乎很丑陋,我更喜欢一些强类型的方式。
正确的做法是什么?非常欢迎提供示例。
data
方法,可以精确地处理这些情况!它直接与本地JavaScript对象一起使用,因此无需使用逗号分隔的列表 - 只需使用数组或对象。也许像这样做可以让你走上正确的轨道。// initialize existing tags
$('#form').data('tags', { foo: true, bar: true });
// add a new tag
$('#form').data('tags').baz = true;
// remove an existing tag
$('#form').data('tags').bar = false;
$('#form').data('tags');
// { foo: true, bar: false, baz: true }
如果将标签保留在对象中,而false
则可以帮助您查看哪些标签需要在服务器端取消分配;这不是必要的,但对您可能有用。
如果您希望从对象中完全删除已删除的值,请使用delete
构造。
// remove an existing tag
delete $('#form').data('tags').bar;
<ul class="tags">
<li>
<span class="tag-name">foo</span>
<a href="#" class="tag-remove">remove</a>
</li>
</ul>
而你的 JavaScript 代码:
$(function() {
$('#form .tag-remove').click(function(e) {
// update the tag data
var tag = $(this).siblings('.tag-name').text();
$('#form').data('tags')[tag] = false;
// remove the tag element
$(this).parent().remove();
return false;
});
});
当然还有更多 - 这并没有处理表单标签数据的初始化,添加新标签或将标签提交到服务器 - 但希望它能引导您朝着正确的方向前进 :)