Databases
StackOverflow2013
Postsdbo
PODRY using handlebars and twitter bootstrap in Meteor
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODRY using handlebars and twitter bootstrap in Meteor
    primarykey
    data
    text
    <p>I am building my first web application with twitter bootstrap and I am liking it, but I am running into a problem of repeating myself.</p> <p>I am building a navigation bar, and I want the UI to reflect which tab is active based on the url. I am using backbone to route the urls. The only problem is that I have to manually code a bunch of different variables to be "active" or "" based on the url so that the tabs will reflect the appropriate state.</p> <pre><code>&lt;template name="navbar"&gt; &lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class="span6"&gt; &lt;ul class="nav nav-tabs"&gt; &lt;li class="{{home}}"&gt; &lt;a href="/home/"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class="{{1999s10}}{{1965malibu}}{{1960hearse}}{{1966gto}}{{1971blazer}} dropdown"&gt; &lt;a class="dropdown-toggle" data-toggle="dropdown"&gt;Cars&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li class="{{1999s10}}"&gt;&lt;a href="/cars/1999s10"&gt;1999 Electric S-10&lt;/a&gt;&lt;/li&gt; &lt;li class="{{1965malibu}}"&gt;&lt;a href="/cars/1965malibu"&gt;1965 Malibu&lt;/a&gt;&lt;/li&gt; &lt;li class="{{1960hearse}}"&gt;&lt;a href="/cars/1960hearse"&gt;1960 Hearse&lt;/a&gt;&lt;/li&gt; &lt;li class="{{1966gto}}"&gt;&lt;a href="/cars/1966gto"&gt;1966 GTO&lt;/a&gt;&lt;/li&gt; &lt;li class="{{1971blazer}}"&gt;&lt;a href="/cars/1971blazer"&gt;1971 Bazer&lt;/a&gt;&lt;/li&gt; &lt;!-- &lt;li class="divider"&gt;&lt;/li&gt; --&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>As you can see, right now, I have a bunch of variables for indicating what tabs are active. I have started to implement the following code, but Its so inelegant that I have stopped and want to use a better method.</p> <pre><code>Template.navbar.home = function () { return Session.equals("active", "home") ? "active" : ''; }; // a bunch more of these for every route var TodosRouter = Backbone.Router.extend({ routes: { "home/": "home", // more routes }, home: function () { Session.set("active", "home"); }, // more functions for capturing the routes and setting the session variable "active" }); Router = new TodosRouter; Meteor.startup(function () { Backbone.history.start({pushState: true}); }); </code></pre> <p>Using this method: (1) has the issue of variables that start with numbers (my bad) (2) requires me to route every url to change the Session "active" variable accordingly (3) requires me to make a template handler for every button/url in the navigation bar</p> <p>There has to be a better method for doing this, but I have yet to find it.</p> <p>To reiterate, I want to find a way of accomplish activating the necessary tabs without breaking the DRY (do not repeat yourself) programming principle.</p> <p>edit:</p> <p>What would be really nice is something like this:</p> <pre><code>&lt;li class="{{(url=="/cars/1999s10/")?"active":""}}"&gt;&lt;a href="/cars/1999s10"&gt;1999 Electric S-10&lt;/a&gt;&lt;/li&gt; </code></pre> <p>That would be a minimal amount of code.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USchet
    1. USchet
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODRY using handlebars and twitter bootstrap in Meteor
      1. USMax Hodges
      1. VTFavorite
    2. VO
      singulars
      1. PODRY using handlebars and twitter bootstrap in Meteor
      1. USmavu
      1. VTFavorite
    3. VO
      singulars
      1. PODRY using handlebars and twitter bootstrap in Meteor
      1. USryeo
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload