EmberTutorial/index.html at master · alumbs/EmberTutorial · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
  <!-- Handlebars go in this file while javascript goes into the app.js file-->
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <script type="text/x-handlebars">
    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <ul class="nav navbar-nav">
          <li class="active">
            <a class="narbar-brand" href="#">Bloggr</a>
          </li>
          <li>{{#link-to 'posts'}}Posts{{/link-to}}</li>
          <li>{{#link-to 'about'}}About{{/link-to}}</li>
        </ul>
      </div>
    </nav>

    <!-- The outlet tag below tells Ember where to render templates. So the About template will get rendered into this script tag, which is where our main window shows up -->
    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="posts">
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="col-xs-3">
          <table class='table'>
            <thead>
              <tr><th>Recent Posts</th></tr>
            </thead>
            {{#each}}
            <tr><td>
            {{#link-to 'post' this}}

              {{title}} <small class='muted'>by {{author.name}}</small>

            {{/link-to}}
            </td></tr>
            {{/each}}
          </table>
        </div>
        <div class="col-xs-9">
          {{outlet}}
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" id='post'>
  {{#if isEditing}}
      {{partial 'post/edit'}}
      <button {{action 'doneEditing'}}>Done</button>
  {{else}}
    <button {{action 'edit'}}>Edit</button>
  {{/if}}

  <h1>{{title}}</h1>
  <h2>by {{author.name}} <small class='muted'>({{format-date date}})</small></h2>

  <hr>

  <div class='intro'>
  {{excerpt}}
  </div>

  <div class='below-the-fold'>
  {{body}}
  </div>
  </script>

  <script type="text/x-handlebars" id='post/_edit'>
    <p>{{input type="text" value=title}}</p>
    <p>{{input type="text" value=excerpt}}</p>
    <p>{{textarea value=body}}</p>
  </script>

  <script type="text/x-handlebars" id="about">
    <div class="about">
      About us.
      A very small page full of nothing
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.

      <p>Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
      </p>
    </div>
  </script>

  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-1.1.2.js"></script>
  <script src="js/libs/ember-1.5.1.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
  <script src="js/app.js"></script>
  <!-- to activate the test runner, add the "?test" query string parameter -->
  <script src="tests/runner.js"></script>
</body>
</html>