git.roojs.org Git - roojs1/blob - examples/view/domtemplate.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4     <link rel="stylesheet" type="text/css" href="../../cssX/roojs-all.css"/>
   5     <link rel="stylesheet" type="text/css" href="../../cssX/xtheme-slate.css"/>
   6
   7     <script type="text/javascript" src="../../roojs-all.js"></script>
   8     <script type="text/javascript" src="../../Roo/DomTemplate.js"></script>
   9
  10
  11 <script id="javascript-code" type="text/javascript">
  12
  13 Roo.onReady(function() {
  14
  15     var html = Roo.get('body').dom.innerHTML;
  16     Roo.get('body').dom.innerHTML = '';
  17
  18
  19     // nice and global to test with..
  20     tpl = new Roo.DomTemplate({
  21        html : html
  22     });
  23     Roo.log(tpl);
  24     var data =   [
  25             {
  26                 ontable : 'mtrack_ticket',
  27                 changedate : new Date() ,
  28                 reason : 'helo',
  29                 person_id_name : 'test',
  30                 object_summary : 'summary'
  31             },
  32             {
  33                 ontable : 'mtrack_repos',
  34                 changedate : new Date()
  35             }
  36         ];
  37     Roo.each(data,  function(r) {
  38         tpl.append(Roo.get('body'), r);
  39     });
  40
  41     Roo.get('template-show').update(Roo.util.Format.htmlEncode(html));
  42     Roo.get('javascript-show').update(Roo.util.Format.htmlEncode(
  43         Roo.get('javascript-code').dom.innerHTML
  44     ));
  45
  46
  47 });
  48
  49
  50 </script>
  51
  52 </head>
  53 <body>
  54     <H1>Dom Template example</H1>
  55     <div id="body">
  56
  57
  58             <li roo-if="ontable == 'mtrack_ticket'"  class="change-log-item">
  59                 <div class="timelineevent">
  60                     <div class="timelinetext">
  61                         <div class="timelinereason">
  62                             <span class="time">{changedate.format:('H:i:s')}</span>
  63
  64
  65                             #<span class="mtrack-ticket-link">{object_id}</span> - <B>{object_summary}</B> <BR/>
  66
  67                             <div class="bubble-wrap">
  68                                 {reason}
  69
  70                                 <p>Comment Added
  71                                         <span class="time">{changedate.format:('H:i:s')}</span>
  72                                         by
  73                                         <span class="mtrack-person" personid="{person_id}"><B>{person_id_name}</B></span>
  74
  75                                 </p>
  76                             </div>
  77
  78
  79                             <div roo-for="audit">
  80
  81                                <div roo-if="action != 'changed'">
  82                                    <div class="bubble-wrap">
  83
  84                                        {value_str}
  85                                     </div><p>  {field_str}  Changed
  86                                         <span class="time">{parent.changedate.format:('H:i:s')}</span>
  87                                            by
  88                                            <span class="mtrack-person" personid="{parent.person_id}"><B>{parent.person_id_name}</B></span>
  89                                        </p>
  90                                 </div>
  91
  92
  93                             </div>
  94
  95
  96
  97
  98                             <span class="mtrack-audits">
  99                                 <div roo-for="audit_ar,a">
 100                                      <div roo-if="action == 'changed'">
 101                                         <span class="mtrack-audit">{a.field_str} set to: <B>{a.value_str}</B></span>
 102                                      </div>
 103                                 </div>
 104                             </span>
 105
 106                             by
 107                             <span class="mtrack-person" personid="{person_id}"><B>{person_id_name}</B></span>
 108
 109                        </div>
 110                     </div>
 111                 </div>
 112             </li>
 113
 114
 115
 116
 117             <li roo-if="ontable == 'mtrack_repos'" class="change-log-item">
 118
 119                 <span class="change" ><span class="time">{changedate.format:('H:i:s')}</span> - {reason:ellipsis(100)}</span>
 120                 <span class="change-log-rev" ><a
 121                      class="changesetlink browse-link"
 122                      href="{baseURL}/Changeset/default/{object_shortname}/{rev}">{rev}</a>
 123                          by
 124                         <span class="mtrack-person" personid="{person_id}"><B>{person_id_name}</B></span>
 125
 126                 </span>
 127                 <ul class="changed-files">
 128
 129                     <div roo-for="audit">
 130
 131                        <li class="file-change">
 132                             <B >{action.substring:(action.length-1)}</B> {value}
 133
 134                         </li>
 135
 136                     </div>
 137                 </ul>
 138
 139
 140
 141
 142                 <div style="display:none;white-space: pre-wrap;">{reason}</div>
 143             </li>
 144
 145
 146
 147
 148             <li  roo-name="somename" class="change-log-item">
 149
 150                 <span class="change" ><span class="time">{changedate.format:('H:i:s')}</span> - {reason:ellipsis(100)}</span>
 151                 <span class="change-log-rev" ><a
 152                      class="changesetlink browse-link"
 153                      href="{baseURL}/Changeset/default/{object_shortname}/{rev}">{rev}</a>
 154                          by
 155                         <span class="mtrack-person" personid="{person_id}"><B>{person_id_name}</B></span>
 156
 157                 </span>
 158                 <ul class="changed-files">
 159
 160                     <div roo-for="audit">
 161
 162                        <li class="file-change">
 163                             <B >{action.substring:(action.length-1)}</B> {value}
 164
 165                         </li>
 166
 167                     </div>
 168                 </ul>
 169
 170
 171
 172
 173                 <div style="display:none;white-space: pre-wrap;">{reason}</div>
 174             </li>
 175
 176
 177
 178     </div>
 179
 180
 181     <h3>Javascript code</h3>
 182     <PRE id="javascript-show"></PRE>
 183     <h3>Template code</h3>
 184
 185     <PRE id="template-show"></PRE>
 186
 187 </body>
 188 </html>