Bootstrap Menus and EmberJS

I love Bootstrap. Mostly because I'm not a very good graphic designer; but also because I'm lazy. I like the things it does for me that make my websites suck less. One of those things is the Bootstrap menu.
One of the nice features of the Bootstrap menu is that you get a gradient highlight when the menu has a "selected" css class applied to it.

I am looking at EmberJS. Ember has lots of nifty features as well. As a Single Page Application (SPA) framework, it likes to handle URL routing, and does something especially nifty with links that it manages: It applies a "selected" class to the current URL.

Did the stars just align? Is this too good to be true? "Um, yea. Why?"

Well, they almost align. It turns out that Bootstrap wants to have a "selected" css class applied to the list item that contains the anchor tag for the menu item while Ember's linkTo helper applies it directly to the anchor tag. Ouch.

In other words, this ember code doesn't work
<li>{{#linkTo "home"}}home{{/linkto}}</li>
What you end up with is html that looks like this
<li><a href='#home' class='selected'>home</a></li>
Unless we want to change bootstrap (again, did I mention that I'm lazy), what we really want is something that looks like this
<li class='selected'><a href='#home'>home</a></li>
Well, it turns out that the ember linkTo block helper can be manipulated to work with bootstrap.
{{#linkTo "home" tagName="li" href=false}}<a {{bindAttr href="view.href" }}>Home</a>{{/linkTo}}
What this little gem does is override the tag name for the linkTo helper, and tell it not to have a href property. Then, inside the anchor tag, we reconstruct the link using the href property from the containing view.

Comments

Post a Comment

Popular posts from this blog

Database Projects, SQL Unit Tests, and TeamCity

Image
Continuous Integration  is a really good idea, especially when you are working with a team of developers. There are lots of tools out there that can help your team build better quality into your application. TeamCity by JetBrains is one such tool that has been around for awhile; specifically, it is the one that my company uses. Visual Studio has Database Projects   SQL Server Data Tools  to address some of the inconsistencies that developers face when using a database as a storage layer; Things like version control and consistent deployment. It also includes SQL unit tests , which fills a huge gap if any  of your logic is in the database. Many organizations moved away from logic in the database years ago because it was tricky (at best) to verify logic on the data tier, of course, they were also making changes directly to the database itself... but I digress. If you are using SQL Server Data Tools, and run your unit tests locally, it is a joy to behold. Your data...
Read more

Building nice XML from SQL Server Tables

The XML functionality of SQL Server is vast, however, the best subset of that functionality that I've found may be demonstrated in the following example: Unfortunately, the example result is listed before the code. Join all the desired tables together Set the desired root element Set the path to an empty string to avoid an extra XML element at the root of each resulting row Provide an XPATH name with attributes for each of the desired columns (select * doesn't work well) Keep all the selected columns together by XPATH name or you'll split your xml attributes See my next blog entry for my best way to shred the xml
Read more

Brent: Programmer. Gamer. Cheapskate. All around good guy.

So... not being one that can leave a sore spot alone, when Brent Brown sent me an email Brent his "preferred" blog link so that I could update the link I had created to Stubenville , I naturally couldn't just update my previous blog entry. I needed to take the opportunity to pour lemon juice, salt, and vinegar into the wound until it became a pulp of agonized flesh. It may be because that's the way I am, but it may also be because Brent really needs this kind of opposition in his life. After all, he has a wonderful wife and cute kids, but as far as I can see, nobody that really gives him the harassing that he needs to keep his life in balance. That's where I come in. I don't know what the big deal is... after all, I liked the Stubenville (not Stupid-ville, that's a whole other wound that needs opening from time to time) thread. However, since he isn't there any more, I suppose that it has a limited shelf life. So, if anyone actualy reads my blog, you...
Read more