How to prepend a big DIV?
I need to prepend
a huge DIV block, which can be seen at the bottom of the question.
My current idea would be to put inside one
$('#开发者_运维知识库content').prepend();
and break each like up, when I need to insert the content of a variable. That would be all the places which says TMPL_VAR
The code would be quite hard to maintain and read.
Is there a clever way to do this?
<form action="" method="post">
<input name="anchor" value="<TMPL_VAR ID>" type="hidden">
<div class="row">
<div class="cellData"> <TMPL_VAR ID> </div>
<div class="cellData"> <input name="title" id="<TMPL_VAR ID>_title" value="<TMPL_VAR TI>" type="text" /> </div>
<div class="cellData"> <input name="owner" id="<TMPL_VAR ID>_owner" value="<TMPL_VAR OW>" type="text" /> </div>
<div class="cellData"> <input name="from" id="<TMPL_VAR ID>_begin_date" value="<TMPL_VAR BD>" type="text" class="datepick" /> </div>
<div class="cellData"> <input name="to" id="<TMPL_VAR ID>_end_date" value="<TMPL_VAR ED>" type="text" class="datepick" /> </div>
<div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" <TMPL_VAR IN>/> Individuel <br> <input name="ctype" value="course" type="radio" <TMPL_VAR CO>/> Course </div>
<div class="cellEdit"> <a href="javascript:showhide('<TMPL_VAR ID>');">Members</a> <input value="Save" type="submit"> </div>
</div>
<div id="<TMPL_VAR ID>" style="display: none; background-color: #fff8e7;">
<div class="rowMembers">
<span>
<label> Users </label> <input name="users" id="<TMPL_VAR ID>_users" size="35" value="<TMPL_VAR US>" type="text" />
<label> Groups </label> <input name="groups" id="<TMPL_VAR ID>_groups" size="35" value="<TMPL_VAR GR>" type="text" />
</span>
</div>
</div>
</form>
I would personally go for jQuery.tmpl() to handle this sort of issue.
This way you could specify a template like so:
<script type="text-x-jquery/template" id="template">
<form action="" method="post">
<input name="anchor" value="${id}" type="hidden">
<div class="row">
<div class="cellData"> <TMPL_VAR ID> </div>
<div class="cellData"> <input name="title" id="${id}_title" value="${ti}" type="text" /> </div>
<div class="cellData"> <input name="owner" id="${id}_owner" value="${ow}" type="text" /> </div>
<div class="cellData"> <input name="from" id="${id}_begin_date" value="${bd}" type="text" class="datepick" /> </div>
<div class="cellData"> <input name="to" id="${id}_end_date" value="${ed}" type="text" class="datepick" /> </div>
<div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" ${in}/> Individuel <br> <input name="ctype" value="course" type="radio" ${co}/> Course </div>
<div class="cellEdit"> <a href="javascript:showhide('${id}');">Members</a> <input value="Save" type="submit"> </div>
</div>
<div id="${id}" style="display: none; background-color: #fff8e7;">
<div class="rowMembers">
<span>
<label> Users </label> <input name="users" id="${id}_users" size="35" value="${us}" type="text" />
<label> Groups </label> <input name="groups" id="${id}_groups" size="35" value="${gr}" type="text" />
</span>
</div>
</div>
</form>
</script>
and then with jQuery populate the template with
$('#template').tmpl(myData).appendTo('#myContainer')
which will insert the populated template into #myContainer
given that you have data in the javascript scope myData
wich corresponds to the data format specified in the template, and that you have defined a html element with an id of myContainer
which is appendable.
精彩评论