tsdot/test-browser.html at main · Blankeos/tsdot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<html>
  <head>
    <script id="headertmpl" type="text/x-dot-template">
      <h1>{{=it.title}}</h1>
    </script>

    <script id="pagetmpl" type="text/x-dot-template">
      <h2>Here is the page using a header template</h2>
      {{#def.header}}
      {{=it.name}}
    </script>

    <script id="customizableheadertmpl" type="text/x-dot-template">
      {{#def.header}}
      {{#def.mycustominjectionintoheader || ''}}i
    </script>

    <script id="pagetmplwithcustomizableheader" type="text/x-dot-template">
      <h2>Here is the page with customized header template</h2>
      {{##def.mycustominjectionintoheader:
      	<div>{{=it.title}} is not {{=it.name}}</div>
      #}}
      {{#def.customheader}}
      {{=it.name}}
    </script>
    <script type="text/javascript" src="dist/browser.global.js"></script>
  </head>

  <body>
    <h1 id="h1">Caro</h1>
    <div id="content"></div>
    <div id="contentcustom"></div>
  </body>

  <script type="text/javascript">
    console.log("loaded", window);
    document.getElementById("h1").addEventListener("click", () => {
      console.log("clicked?", tsdot);
    });
    var def = {
      header: document.getElementById("headertmpl").text,
      customheader: document.getElementById("customizableheadertmpl").text,
    };
    var data = {
      title: "My title",
      name: "My name",
    };

    var pagefn = tsdot.template(document.getElementById("pagetmpl").text, undefined, def);
    document.getElementById("content").innerHTML = pagefn(data);

    pagefn = tsdot.template(
      document.getElementById("pagetmplwithcustomizableheader").text,
      undefined,
      def
    );
    document.getElementById("contentcustom").innerHTML = pagefn(data);
  </script>
</html>