X

Geertjan's Blog

  • May 17, 2015

Knockout Simplicity for Bootstrap.css (Part 1)

Geertjan Wielenga
Product Manager

Imagine you need to create a menubar for your website:

If you had a choice, which of the two below would you choose as the way to express your menubar?

In both cases, you start by declaring Bootstrap.css:

<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

However, which of the two would you prefer to use, after you have added the stylesheet reference above?

Option 1:

Option 2:


Of course, it's up to you and I won't judge you either way. However, to me, option 2 is much simpler and more expressive. Plus, I can use it in any website where I need a menubar, i.e., it's a simple lightweight generic tag in my HTML ready to be used anytime I need a menubar. It also means I don't need to type all that error-prone HTML code and it is also a lot more readable, as well. It looks a bit like JSON, while option 1 is very heavily loaded with angle brackets and other superfluous noise.

Option 2 is a Knockout component.

It is created like this, in my 'appViewModel.js' file:

ko.components.register("menubar", {require: 'components/menubar/menuBar'});

The above points to a JavaScript file named 'menuBar.js', which has this content:

define([], function () {
function MenuBarModel(params) {
self.menus = [];
for (var key in params) {
if (key.substring(0, 3)==('tab')) {
self.menus.push(params[key]);
}
}
}
return {
viewModel: MenuBarModel,
template: {
require: 'text!components/menubar/menuBar-template.html'
}
};
});

Above you see the 'template' binding points to an HTML file, which has this content:

<div class="navbar">
<div class="navbar-inner">
<ul class="nav" data-bind="foreach: menus">
<li data-bind="css: { active: $data.substring(0,1) == '*' }">
<a data-bind="attr: { href: $data.substring($data.indexOf('/')+1) }">
<span data-bind="text: $data.substring(1,$data.indexOf('/'))"/>
</a>
</li>
</ul>
</div>
</div>

And now you can make the menubar a lot fancier: http://www.w3schools.com/bootstrap/bootstrap_case_navigation.asp

By means of the above, we have a simple syntax to define (1) the active menu, (2) the name of the menu, and (3) the URL that is returned when the menu is clicked. The Knockout 'menubar' component figures all these things out under the hood so that the user of the menubar doesn't have to think about it themselves. They simply specify the values that should be passed into the component and the component parses the value and figures out what to do with it.

The above provides a simple and comprehensive architecture for component-based development with JavaScript.

Join the discussion

Comments ( 2 )
  • Thomas Friday, May 29, 2015

    Hello Geertjan, I'm a fan of your blog, i read any new post as it comes on netbeans. I decided to take a dive on HTML5 just recently for i have been a server side developer a long while.

    Please don't mind my question as it will sound naive, i need to understand how this things work.

    Regarding your post;

    1) Where did you define ko in your appViewModel.js before using it?

    2) On which server will the DemoKo be deploy if it is not running on Netbeans.

    Thanks in anticipation.

    Thomas


  • Geertjan Friday, May 29, 2015

    Doesn't need a server, it runs locally in your browser. The 'appViewModel' can be anywhere, just reference is in your HTML.


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.