Vertebrae framework

built with Backbone.js and RequireJS using AMD

Backbone.js and Mustache.js: Small Views and Templates

Short and concise HTML templates that represent repeatable blocks or isolated components of a page are easier to manage and easier for other developers to edit than longer templates which encompass larger portions of a page. A view object with the responsibility of rendering and managing multiple child views is used to organize the components of a page.

Consider navigation elements organized in lists under top level list items…

Each top level item likely uses the same child list to present it’s dropdowns. Rather then use one large template and one large collection of models utilizing smaller templates as components of the view remove hardcoding the hierarchy into both the model and the template but rather move the hierarchy to the view objects used to build the page. When the structure of the child lists needs to go through the change control process for added or removed presentation or a change in the hierarchy as directed by the business, the change is simple perhaps changed one portion of a template and the order of an array which dictates the hierarchy via enumerating. Also the business may dictate that the order of the menu follows various orders depending on visitor properties (e.g. member object either male or female). Then the menu’s components display order can be dictated programmatically, utilizing the small views and templates.

The best practice or goal emphasized above with respect to templates and views is KISS and DRY. As long as the implementation does not become overly complex and difficult to grok, keep the template code DRY, otherwise KISS principle overrides the need to have template code that does not repeat itself.

Code examples

A list item that will become part of various lists:

(event.html) download
1

<a href="/event/{{event_code}}" data-sort="{{sort_order}}">{{title}}</a>

A menu structure, which can be segmented using classes to target sections within the child list

(nav.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<nav>
  {{#types}}
  <li class="{{.}}"><strong>{{.}}</strong>
  <section class="{{.}}-today">
      <em>Today's Events</em>
      <ul></ul>
    </section>
    <section class="{{.}}-endingSoon">
      <em>Ending Soon</em>
      <ul></ul>
    </section>
  </li>
  {{/types}}
</nav>

HTML generated from the two templates using multiple CollectionView objects managed by a parent view object

(nav-example.html) download
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

<nav>
    <li class="Women">
        <strong>Women</strong>
        <section class="Women-today">
            <em>Today's Events</em>
            <ul>
                <li class="Women-today">
                    <a href="/event/12366stellaandjamiewc" data-sort="0">Stella &amp; jamie</a>
                </li>
                <li class="Women-today">
                    <a href="/event/12590classiqueblwtwc" data-sort="1">Classique</a>
                </li>
            </ul>
        </section>
        <section class="Women-endingSoon">
            <em>Ending Soon</em>
            <ul>
                <li class="Women-endingSoon">
                    <a href="/event/12125tahariblowoutwo" data-sort="8">Tahari Outerwear Blowout</a>
                </li>
                <li class="Women-endingSoon">
                    <a href="/event/12588ecoskinblwtwc" data-sort="10">EcoSkin Blowout</a>
                </li>
                <li class="Women-endingSoon">
                    <a href="/event/12053jewelmakblwtwj" data-sort="11">Jewelmak Blowout</a>
                </li>
                <li class="Women-endingSoon">
                    <a href="/event/12393elfcosmeticswb" data-sort="15">e.l.f. Cosmetics</a>
                </li>
                <li class="Women-endingSoon">
                    <a href="/event/12056tedbakerwatchesunisex" data-sort="16">Ted Baker Watches</a>
                </li>
                <li class="Women-endingSoon">
                    <a href="/event/11634bootsitootsiwf" data-sort="17">BootsiTootsi</a>
                </li>
                <li class="Women-endingSoon">
                    <a href="/event/12057lillybeewf" data-sort="18">Lillybee</a>
                </li>
            </ul>
        </section>
    </li>
    <li class="Home">
        <strong>Home</strong>
        <section class="Home-today">
            <em>Today's Events</em>
            <ul>
                <li class="Home-today">
                    <a href="/event/11296bedfordcottageblwtda" data-sort="2">Bedford Cottage: Throws under $49</a>
                </li>
                <li class="Home-today">
                    <a href="/event/12368ldchomebyjoeldessauleshda" data-sort="3">LDC Home by Joel Dessaules</a>
                </li>
            </ul>
        </section>
        <section class="Home-endingSoon">
            <em>Ending Soon</em>
            <ul>
                <li class="Home-endingSoon">
                    <a href="/event/12054ltdedthomaspaulfurniturehda" data-sort="12">Limited Edition: Thomas Paul Furniture</a>
                </li>
                <li class="Home-endingSoon">
                    <a href="/event/12367pinodenaifinearthda" data-sort="14">Pino Denai (1939-2010) Fine Art Collection</a>
                </li>
                <li class="Home-endingSoon">
                    <a href="/event/12592napastylewinecellarhda" data-sort="20">Napa Style: The Wine Cellar</a>
                </li>
                <li class="Home-endingSoon">
                    <a href="/event/12170luxuryhotelsheetsblwthda" data-sort="21">Luxury Hotel Sheets Blowout</a>
                </li>
                <li class="Home-endingSoon">
                    <a href="/event/12169floorcoutureblwthda" data-sort="22">Floor Couture Blowout</a>
                </li>
            </ul>
        </section>
    </li>
    <li class="Kids">
        <strong>Kids</strong>
        <section class="Kids-today">
            <em>Today's Events</em>
            <ul>
                <li class="Kids-today">
                    <a href="/event/12369miabellebabycm" data-sort="4">Mia Belle Baby</a>
                </li>
            </ul>
        </section>
        <section class="Kids-endingSoon">
            <em>Ending Soon</em>
            <ul>
                <li class="Kids-endingSoon">
                    <a href="/event/12240stencilkidsblowoutcm" data-sort="19">Stencil Kids Blowout</a>
                </li>
            </ul>
        </section>
    </li>
    <li class="Getaways">
        <strong>Getaways</strong>
        <section class="Getaways-today">
            <em>Today's Events</em>
            <ul>
                <li class="Getaways-today">
                    <a href="/event/Smoke_Tree_Ranch_Palm_Springs_622" data-sort="5">Smoke Tree Ranch Palm Springs </a>
                </li>
                <li class="Getaways-today">
                    <a href="/event/Amara_Resort_Sedona_623" data-sort="6">Sedona, Amara Resort </a>
                </li>
                <li class="Getaways-today">
                    <a href="/event/The_Andrew_Pinckney_Inn_Charleston_609" data-sort="7">The Andrew Pinckney Inn Charleston</a>
                </li>
            </ul>
        </section>
        <section class="Getaways-endingSoon">
            <em>Ending Soon</em>
            <ul>
                <li class="Getaways-endingSoon">
                    <a href="/event/Millennium_Scottsdale_Resort_Villas_608" data-sort="23">Scottsdale, Millennium Resort &amp; Villas </a>
                </li>
                <li class="Getaways-endingSoon">
                    <a href="/event/Hawaii_Prince_Hotel_Waikiki_610" data-sort="24">Hawaii Prince Hotel Waikiki</a>
                </li>
            </ul>
        </section>
    </li>
    <li class="Men">
        <strong>Men</strong>
        <section class="Men-today">
            <em>Today's Events</em>
            <ul/>
        </section>
        <section class="Men-endingSoon">
            <em>Ending Soon</em>
            <ul>
                <li class="Men-endingSoon">
                    <a href="/event/12003tedbakermc" data-sort="9">Ted Baker Men</a>
                </li>
                <li class="Men-endingSoon">
                    <a href="/event/12406mackagemo" data-sort="13">Mackage Men</a>
                </li>
                <li class="Men-endingSoon">
                    <a href="/event/12367pinodenaifinearthda" data-sort="14">Pino Denai (1939-2010) Fine Art Collection</a>
                </li>
                <li class="Men-endingSoon">
                    <a href="/event/12056tedbakerwatchesunisex" data-sort="16">Ted Baker Watches</a>
                </li>
                <li class="Men-endingSoon">
                    <a href="/event/12592napastylewinecellarhda" data-sort="20">Napa Style: The Wine Cellar</a>
                </li>
                <li class="Men-endingSoon">
                    <a href="/event/12170luxuryhotelsheetsblwthda" data-sort="21">Luxury Hotel Sheets Blowout</a>
                </li>
            </ul>
        </section>
    </li>
    <li class="Beauty">
        <strong>Beauty</strong>
        <section class="Beauty-today">
            <em>Today's Events</em>
            <ul/>
        </section>
        <section class="Beauty-endingSoon">
            <em>Ending Soon</em>
            <ul>
                <li class="Beauty-endingSoon">
                    <a href="/event/12393elfcosmeticswb" data-sort="15">e.l.f. Cosmetics</a>
                </li>
            </ul>
        </section>
    </li>
</nav>