如何在Wicket中设置包含master和detail的Form

时间:2013-08-01 07:21:32

标签: jquery wicket master-detail

我在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中保存这些主要细节情况?

提前致谢,

亨克

0 个答案:

没有答案