Question

我需要prepend一个巨大的DIV块，可以在问题的底部看到。

我目前的想法是放入一个

$('#content').prepend();

当我需要插入变量的内容时，

并将每个打破。这就是TMPL_VAR

所说的所有地方

代码很难维护和阅读。

有一种聪明的方法吗？

<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> &nbsp; <input name="users"  id="<TMPL_VAR ID>_users"  size="35" value="<TMPL_VAR US>" type="text" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <label> Groups </label> &nbsp; <input name="groups" id="<TMPL_VAR ID>_groups" size="35" value="<TMPL_VAR GR>" type="text" />
      </span>
    </div>
  </div>
</form>

Answer 1

我个人会去jQuery.tmpl()处理这类问题。

这样你可以像这样指定一个模板：

   <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> &nbsp; <input name="users"  id="${id}_users"  size="35" value="${us}" type="text" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <label> Groups </label> &nbsp; <input name="groups" id="${id}_groups" size="35" value="${gr}" type="text" />
          </span>
        </div>
      </div>
    </form>
    </script>

然后用jQuery用

填充模板

  $('#template').tmpl(myData).appendTo('#myContainer')

将填充的模板插入#myContainer，前提是您在javascript范围myData中包含与模板中指定的数据格式相对应的数据，并且您已定义了带有可附加的myContainer的ID。

如何预置大DIV？

1 个答案: