git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/dtl/demos/demo_HtmlTemplated.html

   1 <html>
   2         <head>
   3                         <title>Demo using dojox.dtl._HtmlTemplated</title>
   4             <script type="text/javascript" src="../../../dojo/dojo.js"
   5                                 djConfig="isDebug: true, parseOnLoad: true"></script>
   6             <script type="text/javascript" src="../../../dijit/dijit.js"></script>
   7                         <style type="text/css">
   8                                 @import "../../../dijit/themes/tundra/tundra.css";
   9                         </style>
  10             <script type="text/javascript">
  11                                         dojo.require("dojox.dtl._HtmlTemplated");
  12                                         dojo.require("dijit.form.Button");
  13
  14                                         dojo.declare("Fruit", [dijit._Widget, dojox.dtl._HtmlTemplated], {
  15                                                 widgetsInTemplate: true,
  16                                                 items: ["apple", "banana", "orange"],
  17                                                 keyUp: function(e){
  18                                                         if((e.type == "click" || e.keyCode == dojo.keys.ENTER) && this.input.value){
  19                                                                 console.debug(this.button);
  20                                                                 var i = dojo.indexOf(this.items, this.input.value);
  21                                                                 if(i != -1){
  22                                                                         this.items.splice(i, 1);
  23                                                                 }else{
  24                                                                         this.items.push(this.input.value);
  25                                                                 }
  26                                                                 this.input.value = "";
  27                                                                 this.render();
  28                                                         }
  29                                                 },
  30                                                 // Note, the load tag here is superfluous, since _HtmlTemplate has a dojo.require for it.
  31                                                 templateString: '<!--{% load dojox.dtl.contrib.dijit %}--><div><input dojoAttachEvent="onkeyup: keyUp" dojoAttachPoint="input"> <button dojoType="dijit.form.Button" dojoAttachPoint="button" dojoAttachEvent="onClick: keyUp">Add/Remove Item</button><ul><!--{% for item in items %}--><li><button dojoType="dijit.form.Button parsed" title="Fruit: {{ item }}"><!--{{ item }}--><script type="dojo/connect" event="onClick" args="e">console.debug("You clicked", this.containerNode.innerHTML);</' + 'script></button></li><!--{% endfor %}--></ul></div>'
  32                                         });
  33
  34                 dojo.require("dojo.parser");
  35             </script>
  36                         <body class="tundra">
  37                                 <div dojoType="Fruit" id="dtl"></div>
  38                         </body>
  39         </head>
  40 </html>