spa-tutorial/index.html at master · mmukhin/spa-tutorial · 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
104
105
106
107
108
109
110
111
112
113
114
115
116
<!-- Backbone version of the NBA Application -->

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>NBA Application</title>
        <link rel="stylesheet" href="lib/css/master.css" />
    </head>

    <body>

        <!-- Navigation -->
        <div class="nav floatleft">
            <a href="#league" id="league-link">League</a>
            <a href="#about" id="about-link">About</a>
        </div>

        <div class="nav floatright">
            <a href="index.html" class="nolink">Backbone</a>
            <a href="angular.html">Angular</a>
        </div>

        <div style="clear:both;"></div>

        <!-- App View -->
        <div id="league-div">
            <hr/>
            <h1>NBA App</h1>

            <!-- Form for creating new teams -->
            <div id="create">
                <fieldset>
                    <legend>Team Creation</legend>
                    <form id="newTeam">
                        <input type="text" id="new-team-city" placeholder="Team City" autofocus />
                        <input type="text" id="new-team-name" placeholder="Team Name" />
                        <input type="submit" id="new-team-add" class="button" value="Create" />
                    </form>
                </fieldset>
            </div>

            <br/>

            <!-- League information -->
            <fieldset>
                <!-- Auto-updating count of teams in the league -->
                <legend>Teams in league: <span id="backbone-number-teams"></span></legend>

                <form>
                    <!-- Team filter by keyword -->
                    <input type="text" id="backbone-search" placeholder="Search Keyword" />
                    <span id="backbone-search-info"></span>
                </form>
                <br/>

                <!-- Loop over teams in $scope.teams -->
                <div>
                    <div class="header-row">Link / City / Name</div>
                </div>
                <div id="backbone-teams">
                </div>
            </fieldset>
        </div>

        <!-- AboutView -->
        <div id="about-div" class="hide">
            <hr/>
            <h1>About</h1>

            <fieldset>
                <legend>Michael Mukhin</legend>
                <a href="mailto:hello@psitsmike.com">hello@psitsmike.com</a><br/>
                <a href="https://github.com/mmukhin" target="_blank">github.com/mmukhin</a>
            </fieldset>
        </div>

        <!-- Templates -->
        <!-- Template: viewing a team -->
        <script type="text/template" id="backbone-view-team">
            <!-- layout for displaying a team -->
            <!-- determine whether or not to add the "hide" class -->
            <div style="display:inline-block;min-width: 500px;">
                <a href="http://nba.com/<%= name.toLowerCase() %>" target="_blank">Team Link</a>
                <%- city %> <%- name %>
            </div>
            <div style="display:inline-block;min-width: 500px;">
                <!-- click listeners bound to $scope -->
                <!-- @todo update -->
                <input type="button" id="backbone-team-edit" class="button" value="Edit" />
                <input type="button" id="backbone-team-delete" class="button" value="Delete" />
            </div>
        </script>
        <!-- Template: editing a team -->
        <script type="text/template" id="backbone-edit-team">
            <!-- determine whether or not to add the "hide" class -->
            <form>
                <div style="display:inline-block;min-width: 500px;">
                    <input type="text" id="edit-team-city" value="<%- city %>" placeholder="Team City" />
                    <input type="text" id="edit-team-name" value="<%- name %>" placeholder="Team Name" />
                </div>
                <div style="display:inline-block;min-width: 500px;">
                    <!-- click listeners bound to $scope -->
                    <input type="submit" id="backbone-team-save" class="button" value="Save" />
                    <input type="button" id="backbone-team-cancel" class="button" value="Cancel" />
                </div>
            </form>
        </script>

        <!-- Scripts -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
        <script src="lib/scripts/underscore.js"></script>
        <script src="lib/scripts/backbone.js"></script>
        <script src="lib/scripts/app-backbone.js"></script>
    </body>
</html>