backboneJS/hello_world.html at master · hummingbird-12/backboneJS · 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
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Hello World in Backbone.js</title>
</head>

<body>
  <!-- ========= -->
  <!-- Your HTML -->
  <!-- ========= -->

  <div id="container">Loading...</div>            <!-- Basic Backbone View -->
  <div id="container_">Another loading...</div>   <!-- Backbone View with _.js Template -->

  <!-- ========= -->
  <!-- Libraries -->
  <!-- ========= -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"
    type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"
    type="text/javascript"></script>

  <!-- =============== -->
  <!-- Javascript code -->
  <!-- =============== -->
  <script type="text/javascript">
    // your JS code goes here

    /* -----------------------
         Basic Backbone View
       ----------------------- */
    var AppView = Backbone.View.extend({
      // el - stands for element. Every view has a element associate in with HTML
      //      content will be rendered.
      el: '#container',
      // It's the first function called when this view it's instantiated.
      initialize: function () {
        this.render();
      },
      // $el - it's a cached jQuery object (el), in which you can use jQuery functions
      //       to push content. Like the Hello World in this case.
      render: function () {
        this.$el.html("Hello World");
      }
    });

    var appView = new AppView();

    /* ------------------------------------
         Backbone View with _.js Template
       ------------------------------------ */
    var AppView_ = Backbone.View.extend({
      el: $('#container_'),
      // template which has the placeholder 'who' to be substitute later
      template: _.template("<h3>Hello <%= who %></h3>"),
      initialize: function () {
        this.render();
      },
      render: function () {
        // render the function using substituting the varible 'who' for 'inoino!'.
        this.$el.html(this.template({ who: 'inoino!' }));
        //***Try putting your name instead of inoino.
      }
    });

    var appView_ = new AppView_();
  </script>

</body>

</html>