Replacing Radio Buttons with a Button Group using Bootstrap and #KnockoutJS

Published on Apr 27, 2015 by Jamie Munro

Problem


Radio buttons are hard-to-see, not easy to select, and let's face it, quite mundane. You would like to replace these radio buttons with a group of buttons that represent the same functionality, e.g. only one of the options may be selected at any given time.

Solution


Leveraging Bootstrap which provides many incredibly styled components for buttons, alert boxes, tables, forms, etc... regular radio buttons will be replaced by a button group (see screenshot below). Knockout.js will be used to create a custom data binding that will make the group of buttons act like regular radio buttons (with a nicer look of course).

radiobuttongroup

This example assumes you have a basic understanding of both Bootstrap and Knockout.js. If you don't, feel free to explore my latest book ASP.NET MVC 5 with Bootstrap and Knockout.js for a great introduction, plus many more examples.

The versions used for this example are 3.3.4 for Bootstrap and 3.3 for Knockout.js. This example should be compatible with older versions of these frameworks.

Read more >

Tags: KnockoutJS | knockoutjs | Bootstrap | bootstrap | radio buttons | buttons

(Un)Check All using #KnockoutJS

Published on Apr 23, 2015 by Jamie Munro

When I wrote Knockout.js: Building Dynamic Client-Side Web Applications I was trying to focus on demonstrating specific things, such as custom bindings, extending observables, etc. Unfortunately this didn't leave room for what I would call "random" examples of things that I do on a semi-regular basis. This blog post will demonstrate how to create a (un)check all list of checkboxes.

If I haven't said it before, examples like this are why I love working with Knockout.js on a daily basis. This example is accomplished in under 50 lines of code, with most of it being whitespace for readability!

The following example assumes you understand how to install Knockout.js and have a brief understanding of Knockout ViewModels. If you are looking for a good introduction *cough* *cough*, my book does an excellent job of it ;)

Problem


You have a list of elements - such as emails or any other list of data - and you want to provide the user a one-click button to select (or unselect) all items in the list. A nice added bonus, you want to automatically update the "global" checkbox indicating when all items are checked (and unchecking it when all items are not checked).

Solution


This problem can be solved by leveraging a computed observable. With Knockout.js, computed observables are re-evaluated each time an observable variable changes in the computed function. To avoid a circular reference, a writable computed observable will be used to force the (un)checking of all items.

This example is using Knockout.js version 3.3; however, it should be compatible with older versions as well.

Read more >

Tags: KnockoutJS | knockoutjs

ASP.NET MVC 5 with Bootstrap and Knockout.js

Published on Apr 21, 2015 by Jamie Munro

I can't believe 9 months has gone by since I came to an agreement on writing two books with O'Reilly Media! The first book was on Knockout.js which is a great framework that focuses on the Model-View-ViewModel (MVVM) architecture pattern. I finished the initial draft at the end of September 2014. During October and November, I multi-tasked by writing the second book while working through copy edits and multiple rounds of QC on the first book.

The first book official released (in e-book format) in December with the print version releasing early in January.

December, January, and February were all busy months while I was working on the second book. I cannot stress how difficult this book was to write. Each chapter would take days to write, tweak, and finalize.

March, and now April contained more copy edits and QC rounds for the second book. I think the book is about to be finalized and the e-book version should be ready sometime in the middle of May with the print copy following shortly after!

As the title of this blog states, the book is titled ASP.NET MVC 5 with Bootstrap and Knockout.js. The (un)official back cover reads as follows:

"Bring dynamic server-side web content and responsive web design together to build websites that work and display well on any resolution, desktop or mobile. With this practical book, you’ll learn how by combining the ASP.NET MVC server-side language, the Bootstrap front-end framework, and Knockout.js—the JavaScript implementation of the Model-View-ViewModel pattern.

Author Jamie Munro introduces these and other related technologies by having you work with sophisticated web forms. By the end of the book, experienced and aspiring web developers alike will learn how to build a complete shopping cart that demonstrates how these technologies interact with each other in a sleek, dynamic, and responsive web application.

  • Build well-organized, easy-to-maintain web applications by letting ASP.NET MVC 5, Bootstrap, and Knockout.js do the heavy lifting

  • Use ASP.NET MVC 5 to build server-side web applications, interact with a database, and dynamically render HTML

  • Create sleek and responsive views with Bootstrap that render on a variety of modern devices; you may never code with CSS again

  • Add Knockout.js to enhance responsive web design with snappy client-side interactions driven by your server-side web application"


I think this does a great job of describing why I chose these three technologies for the book and how they come together allowing you to easily build dynamic and responsive websites.

While writing these two books I jotted down a lot of ideas for examples. Unfortunately (or fortunately), I was unable to include them all into the books. So over the next little while, I will work to bring them as examples on my blog. Stay tuned. If you have any questions about the books, feel free to post questions/comments here on my blog or find me on Twitter @endyourif

Read more >

Tags: ASP.NET | JavaScript | KnockoutJS | Bootstrap

Knockout - Uncaught ReferenceError: Unable to process binding

Published on Oct 27, 2014 by Jamie Munro

If you've used Knockout.js in your project, at some point or another you've probably encountered the following error "Uncaught ReferenceError: Unable to process binding". The most likely cause is a typo somewhere or forgetting to change the context. E.g. you are within a foreach binding and forget to use $parent.

I recently encountered this issue and could not find the typo anywhere. Like most developers in my situation I was getting really frustrated, banging my head against the world looking for answers.

Unfortunately, there is no easy answer to this bug; however, I can suggest an excellent technique that will hopefully help point you in the right direction.

Here is a complete example that creates a table and displays a list of books within the table. There is an unfortunate typo within one of the td data bindings.

Read more >

Tags: Javascript | KnockoutJS | knockoutjs | data binding | debugging

Speeding up my unit tests

Published on Apr 28, 2014 by Jamie Munro

I hope this isn’t too extremely obvious, but I found that I had to take a step back and re-examine my unit tests to find this simple improvement to speed up my unit tests.

When I wrote about how I’m hooked on test-driven development (TDD), the example in that post was too simple and time savings are not noticed.  However, let’s dive in to something a little deeper where we have a full class to test oppose to a single internal function.

Read more >

Tags: ASP.NET | Theory | fizzbuzz | tdd | Testing | testing

Advanced Automatic Ninject Bindings

Published on Jan 13, 2014 by Jamie Munro

Automatic Ninject Bindings

Published on Jan 7, 2014 by Jamie Munro

How I overcame my anxieties

Published on Oct 19, 2013 by Jamie Munro

Android ListView with a Footer Form

Published on Sep 26, 2013 by Jamie Munro

Three-month work-life retrospective

Published on Sep 11, 2013 by Jamie Munro

Behavior Therapy Tracker

Published on Sep 1, 2013 by Jamie Munro

Finding That Inner Calm

Published on Jun 18, 2013 by Jamie Munro

If You Don't Start You Won't Finish

Published on Jun 13, 2013 by Jamie Munro

Setting Up CakePHP with IIS

Published on Jun 11, 2013 by Jamie Munro

Developers are Authors

Published on Jun 6, 2013 by Jamie Munro

My Epic Farewell Poem

Published on May 30, 2013 by Jamie Munro

Slowing Down Before You Speed Up

Published on May 29, 2013 by Jamie Munro

My Favorite Thing About Coldfusion

Published on May 28, 2013 by Jamie Munro

Automapper Performance Testing

Published on May 27, 2013 by Jamie Munro

Should I Leave My Job?

Published on May 24, 2013 by Jamie Munro

Why the Repository Pattern

Published on May 20, 2013 by Jamie Munro

Why is my calendar always full?

Published on May 15, 2013 by Jamie Munro

Simple Things Make Me Happy

Published on May 14, 2013 by Jamie Munro

Compelling Interview Questions

Published on Apr 25, 2013 by Jamie Munro

Recent Guest Posts on PHPMaster.com

Published on Jan 7, 2013 by Jamie Munro

2012 Year in Review

Published on Dec 21, 2012 by Jamie Munro

Google Event Tracking

Published on Oct 5, 2012 by Jamie Munro

My First Node Application

Published on Oct 4, 2012 by Jamie Munro

Regular Expressions with Mysql

Published on Oct 2, 2012 by Jamie Munro

Mysql Uptime Check Script

Published on Oct 1, 2012 by Jamie Munro

Renaming a Database in Mysql

Published on Sep 28, 2012 by Jamie Munro

Using Jquery to Check a Checkbox

Published on Sep 27, 2012 by Jamie Munro

A Fancier Twitter Timeline

Published on Sep 25, 2012 by Jamie Munro

Upgrading my Blog - The Final Saga!

Published on Sep 24, 2012 by Jamie Munro

The Best Way to Prevent SQL Injection

Published on Sep 19, 2012 by Jamie Munro

CakePHP 2.x Login System

Published on Sep 18, 2012 by Jamie Munro

Load Testing Mysql with mysqlslap

Published on Sep 17, 2012 by Jamie Munro

A Short Rant About Coding Conventions

Published on Sep 13, 2012 by Jamie Munro

What I Learned This Summer

Published on Sep 7, 2012 by Jamie Munro

It's LEMP not LAMP!

Published on Sep 6, 2012 by Jamie Munro

Amazon EC2 Shoutout!

Published on Sep 5, 2012 by Jamie Munro

PHP: Require/Include vs Autoloader

Published on Aug 29, 2012 by Jamie Munro

2011: Year in Review

Published on Jan 2, 2012 by Jamie Munro

MVC 3 Routing Example

Published on Oct 17, 2011 by Jamie Munro

20 Recipes for Programming MVC 3

Published on Oct 12, 2011 by Jamie Munro

Officially published my CakePHP Book

Published on May 19, 2011 by Jamie Munro

AJAX Star Rating Plugin For CakePHP

Published on Mar 2, 2011 by Jamie Munro

IBM's Watson On Jeopardy!

Published on Feb 16, 2011 by Jamie Munro

Publishing an e-book on Smashwords

Published on Feb 7, 2011 by Jamie Munro

CakePHP 2.0 Rant Retraction

Published on Feb 1, 2011 by Jamie Munro

CakePHP 2.0 Rant

Published on Jan 31, 2011 by Jamie Munro

Random Funny Technology Videos

Published on Jan 27, 2011 by Jamie Munro

Using the TextHelper with CakePHP

Published on Jan 24, 2011 by Jamie Munro

Maintaining the back button with AJAX

Published on Dec 28, 2010 by Jamie Munro

AJAX, can there be too much?

Published on Dec 22, 2010 by Jamie Munro

Making Money With Flash Games

Published on Jun 27, 2010 by Jamie Munro

iPhone Apps Randomly Crashing?

Published on Feb 4, 2010 by Jamie Munro

Optimizing CakePHP Websites

Published on Jan 20, 2010 by Jamie Munro

Adding SEO functionality

Published on Nov 15, 2009 by Jamie Munro

unbindModel and $this->paginate()

Published on Aug 20, 2009 by Jamie Munro

Someone at work tick you off?

Published on Jul 28, 2009 by Jamie Munro

Follow me on Twitter

Published on Jun 19, 2009 by Jamie Munro

Sharing your way to success

Published on Jun 6, 2009 by Jamie Munro

Photobucket, Photos, and You

Published on May 23, 2009 by Jamie Munro

Facebook, Photos, and You!

Published on May 18, 2009 by Jamie Munro

Creating your first iGoogle Gadget

Published on May 12, 2009 by Jamie Munro

Bebo Development Scares Me

Published on May 7, 2009 by Jamie Munro

Caching Queries in CakePHP

Published on Apr 25, 2009 by Jamie Munro

Understanding group bys

Published on Apr 18, 2009 by Jamie Munro

ActivityIndicator with a UIWebView

Published on Apr 15, 2009 by Jamie Munro

Custom pagination query in CakePHP

Published on Apr 13, 2009 by Jamie Munro

3 Flaws to CakePHP's AuthComponent

Published on Apr 10, 2009 by Jamie Munro

The flaws of using isset()

Published on Apr 8, 2009 by Jamie Munro

Reset UINavigationController

Published on Apr 6, 2009 by Jamie Munro

Scroll a UIWebView

Published on Apr 4, 2009 by Jamie Munro

Transparent UIWebView

Published on Apr 2, 2009 by Jamie Munro

A friendly framework reminder

Published on Apr 1, 2009 by Jamie Munro

Web Developers are Warriors

Published on Mar 30, 2009 by Jamie Munro

Unbind Model Validation in CakePHP

Published on Mar 28, 2009 by Jamie Munro

Jquery vs Prototype/Scriptaculous

Published on Mar 26, 2009 by Jamie Munro

How attentive are you?

Published on Mar 25, 2009 by Jamie Munro

Re-map key/value array data in PHP

Published on Mar 19, 2009 by Jamie Munro

How to deal with stress at work

Published on Mar 17, 2009 by Jamie Munro

Underscores and Internet Explorer Fun

Published on Mar 13, 2009 by Jamie Munro

How to advance our CMS in CakePHP

Published on Mar 8, 2009 by Jamie Munro

How to create a CMS with CakePHP

Published on Mar 7, 2009 by Jamie Munro

AJAX Select box in CakePHP

Published on Mar 6, 2009 by Jamie Munro

How to setup a route in CakePHP

Published on Mar 5, 2009 by Jamie Munro

A practical CASE Statement Example

Published on Mar 4, 2009 by Jamie Munro

The Importance of Database Indexing

Published on Feb 27, 2009 by Jamie Munro

Dynamic COUNT() Versus Static COUNT()

Published on Feb 24, 2009 by Jamie Munro

Why You Should Always Backup

Published on Feb 22, 2009 by Jamie Munro

Why Frameworks Are Better

Published on Feb 17, 2009 by Jamie Munro

Why Is Internet Explorer Better?

Published on Feb 15, 2009 by Jamie Munro

Drag and Drop with AJAX Example

Published on Feb 14, 2009 by Jamie Munro

SQL Tips - Why LEFT JOINS are bad

Published on Feb 13, 2009 by Jamie Munro