我在Wicket应用程序上工作,用户可以在页面中键入消息并添加指向该消息的多个链接。页面设计使用户可以同时键入消息并添加链接,然后只需单击一下即可提交所有内容。
我为Message和Link创建了单独的域对象,其中Message有一个Links集合(Set)作为数据成员。下面是我们需要用来存储消息和链接的HTML部分。
<section wicket:id="newMessageSection" class="new-message">
<div wicket:id="messageEditor" class="message-editor" style="">
<form wicket:id="newMessageForm" class="write-new-message">
<span wicket:id="feedback" ></span>
<input wicket:id="title" class="new-message-title" type="text" required="required" placeholder="Title of the message" />
<span wicket:id="titleFeedback" ></span>
<div class="editor-container">
<textarea wicket:id="text" style="width:583px; height:120px; float:left;" cols="60" rows="5" id="txtEditor">
Some Initial Content here
</textarea>
</div>
<span wicket:id="textFeedback" ></span>
<a class="add-links">Add Links</a>
<div class="link-sets">
<div class="link-set" style="display:none">
<input name="link-name-0" type="text" class="link-label" placeholder="Label"/>
<input name="link-url-0" type="url" class="link-url" placeholder="http://"/>
<a class="extra-link">+</a>
</div>
</div>
<footer class="new-message-footer">
<input type="submit" value="Save Message" class="blue submit-new-message" />
</footer>
</form>
</div>
</section>
注意:“extra-link”类会触发一些添加新链接的jquery代码:
$(".link-sets").delegate(".extra-link", "click", function() {
var linkCount = $('.link-set').length;
$('.link-sets').append('<div class="link-set added-set"><input name="link-name-' + linkCount + '" type="text" class="link-label" placeholder="Label"/><input name="link-url-' + linkCount + '"type="url" class="link-url" placeholder="http://"/><a class="extra-link">+</a></div>');
});
进行显示的最佳做法是什么,更重要的是,在Wicket中保存这些主要细节情况?
提前致谢,
亨克