ui/test/html/routed.html at main · litejs/ui · 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en"><head>
<title>LiteJS routed view example</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1">
<link rel="icon" href="data:image/x-icon;,">
<link rel="stylesheet" href="style.css">
</head><body>
<script type="ui">

// An internal view `#pub` without a route can used as a parent for other views,
// put inside $ui root element (document.body by default)
%view #pub #
  h1 LiteJS <routed views> are simple!
  hr
  nav
    a[href="#"] Home
    a[href="#about"] About
  hr
  %slot
  footer
    hr
    p
      a[href="simplest.html"] ← Previous simplest example
      a[href="svg-spa.html"].right Next full-SVG Single-Page Application example →
    p.text-sm Built with passion and a bit of JavaScript magic ✨


// Public view `home` uses `#pub` as it's parent
%view home #pub
main
  h2 Hello home
  p This is a single-page application using hash-based URLs.
  p Navigating between menu items updates the DOM without reloading the page.
  p By default, 'home' is the initial view.
  dl
    dt Things to do
    dd Inspect downloaded resources in the Developer Tools' Network tab.
    dd View the source code of this web page.
    dd ;t 'Contribute on [GitHub <https://github.com/litejs/>].'


%view about #pub
// A view can load a file, and the 'xhr.json' function parses it and stores the content in the root data object.
;f "contacts.json"
main
  h2 About
  p Following links are loaded from a json file
  ul
    li ;each!"row",contacts
      a ;txt row.title;href!row.link


%view blog/{blogFile} #pub
main
	article ;d!blogFile


%js
  // All loaded *.json files will be handled by this function
  xhr.json = function(str, url) {
    // $d is root data object
    $d[url.split(".")[0]] = JSON.parse(str)
  }
  var blogCache = {}
  // Handle named route parameter.
  $ui.param("blogFile", function(value, name, view, params) {
    if (blogCache[value]) return $d[name] = blogCache[value]
    var cb = view.wait()
    xhr("GET", value + ".text", function(err, body) {
      $d[name] = blogCache[value] = body || "Error"
      cb()
    }).send()
  })


%start
</script>
<script src="https://litejs.com/litejs.full.min.js"></script>
<noscript>This application requires JavaScript</noscript>
</body></html>