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 ;)
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).
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
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:
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 >
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 >
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
Published on Mar 24, 2014 by Jamie Munro
I must say, this came as a shock to me, until I looked at the results and thought about it for a minute. Before jumping in, let me explain how and where I encountered this. I was recently working on a project called Deja Scene – The actor to actor movie database
. The purpose of this site is to find two actors who have starred in multiple movies together.
Because the nature of the algorithm an actor can be either on the left side of the connection or the right side.
Let’s look at an example, if I search for George Clooney
, I will find that he has 372 Deja Scene connections. Here was the original query I used to retrieve the list of his connections:
WHERE actor1_id =1
OR actor2_id =1
Seems pretty straight forward; however, I was seeing really slow performance and I couldn’t figure out why. I created an index on both the actor1_id and the actor2_id, so I assumed Mysql was properly indexing this. Boy was I wrong. Look at the results when I use the EXPLAIN function:
Read more >
Tags: SQL | Optimization | performance | mysql