Knockout.js textInput binding

Knockout.js added the textInput binding in version 3.2. This has been a big improvement over the standard value binding. Both provide two-way data-binding, but the value binding updates after the input field loses focus, while the textInput binding updates instantly. There has been a valueUpdate parameter available for the value binding, but it has not worked reliably for me. I set the valueUpdate parameter to keypress, but it still did not provide a reliable instant update for me. That has been totally resolved with the new textInput binding. The one thing I am not sure about is the performance impact of using textInput over value, so I have only been using it on fields where it is important to get the instant updates. Some of those fields are quantity or price fields so I can dynamically update the extended price and order totals while the user is entering data and not so much on name fields where it doesn’t matter to get the instant update.

Web vs Green Screen Development

Recently, I have been working on some projects requiring traditional green screen development. That is programs that run in telnet windows. In the past, they ran on actual terminals which had green screens which is where the name green screen came from when referencing telnet applications.

I realize how much I enjoy web development over the old style development. With web development, you can easily add fields to a screen and move data around without concerning yourself with the nitty-gritty details. It is much easier than working in a 80 character by 24 row screen. To move a field, you have to be concerned with making sure it will fit in the available space and, it seems like, moving one thing causes a ripple effect of updates to keep everything fitting on the screen. I realize some of these old systems that still use telnet windows have a lot of old data in them, but it really is time to hijack the front end of those systems and implement either web based or windows based data entry.

Knockout.js appreciated

We have been preparing to launch a project to production and I had to go back and rework some features. I realize again how much time Knockout.js saves me. I think the biggest help is the two-way data-binding. I remember in the past implementing my own data-binding and that would add hours to a project and would be tough to maintain. Using Knockout.js has eliminated that from my coding and just provides it out of the box. It has literally saved me hours of time.

It has an active Stack Overflow group as well. I was needing to switch an HTML SELECT to a combo box and found several options on Stack Overflow. Having an active group on Stack Overflow is a must for selecting a viable project to use.

Agile origins presentation

I missed the January TAP meeting. At that meeting, Dale Stewart was giving a presentation on the origins of agile development. Dale made his presentation available online. I recently finished going through the presentation and I wish I had been there for the in-person presentation. Dale included a ton of valuable material. I can highly recommend the presentation. I especially enjoyed the sections on the Cynefin Framework and Kanban. Make sure you watch the videos linked to in those slides. I am going to have to go back and review this presentation again. There is a lot there that I can use to improve how I do things. Thank you Dale for all the hard work you put into compiling this presentation.

OpenCart multi-store problems

I have been continuing to evaluate OpenCart. One of the reasons OpenCart was selected was for its multi-store capability. I would say they have not finished implementing the multi-store capability yet. If you only use what is built into OpenCart and do not directly update the MySQL tables, the multi-store setup is incomplete. You can define multiple stores and define what inventory is available in each store, but that is the extent of what you can do. You cannot define a separate payment processor for each store or define different shipping methods for each store. If you review the MySQL table for the settings, they do support defining things separately for each store, but the front-end has not been defined for it. There is an article in the forums which explains the problem. There is an independently developed plug-in developed called Multi 201 which does provide this capability that is available for $50 AUD. If you are going to be using multiple stores, this plug-in is a necessity.

Edit – 1/25/2015: Found another problem with the multi-store setup in OpenCart. If a customer registers for one store, they just registered in all stores. I think this is a mistake in design. I don’t know of a work-around for this yet.

OpenCart shopping cart software

I have been doing an evaluation of the OpenCart open source shopping cart software. It is implemented using PHP and MySQL. It is still early, but it appears to be a capable shopping cart. I have worked with Magento in the past and OpenCart compares favorably. OpenCart’s file and table layouts seem reasonable. I got lost when I was looking for items in Magento. The biggest thing that appears to be missing from OpenCart is an API for external interaction. With Magento, I was able to use an API for adding new inventory or retrieving new orders. I haven’t found an exposed API for OpenCart yet. However, the table layouts are straightforward and I was able to write an order export script using MySQL commands and accessing the database directly.

Like I said, it is still early in the evaluation process, but I would recommend adding it to your list of packages to investigate.


hack.summit() was held in early December 2014. It was a virtual conference where you could attend from home and view everything over the internet. I was unable to view it while it was underway, but there is a playlist of the sessions available on YouTube. I have been catching up on the sessions in my spare time. There are several sessions that I would recommend:

  • Reuven Lerner’s presentation comparing Ruby and Python
  • Alex Gaynor’s presentation on Code Review
  • Kimber Lockhart’s presentation on Inheriting Bad Code
  • Yehuda Katz’s presentation on Indie OSS. (I think several of his suggestions can be applied to any project, not just OSS.)
  • Floyd Marinescu’s presentation on Running Virtual Teams

Knockout Repeat plug-in

I had a request to display the newest items added at the top of the table, but in the data storage, the newest items needed to be added at the bottom. The built-in foreach binding in knockout does not have an order option. It always traverses the observable array from 0 to the last item. So, I needed to figure out another option for building the table. One option, using only built-in knockout functionality, was to create a second array and using the reverse function on the array to recreate the second array whenever the first array was updated. I just saw too many possible problems with that and, having 2 copies of data, they were liable to get out of sync.

I searched for options on Stackoverflow and found a Repeat plug-in that had been created by Michael Best. It works similar to foreach, but it does have a reverse option which would do what I need. There are some differences in how they work. The main difference is the context that has scope within the loop. In “foreach”, the context changes to the observable array. So, if I specified “foreach: payments”, within the loop, I would just use “amount”. While using the repeat binding, the context stays with the original parent object. So, if I specified “repeat: {foreach:payments, reverse:true}”, within the loop, I would use “$item().amount” to access properties of the object stored in the observable array.

The differences are very minor, but the functionality provided is quite beneficial. This is a plug-in I highly recommend.

Have a Happy Thanksgiving.

Knockout.js Select bindings

Knockout.js is versatile in how you can bind to HTML SELECT inputs. Most of the examples show bindings to simple arrays, but there is a lot more functionality available. The tricky part is knowing where to look. You might think to look for a select binding, but you actually want to look at the documentation for the options binding.

Let me show you an example. Instead of having a simple array of single values to bind to, you want to have an array of objects.

var invlist = [{"id":"PGT_MUM-A","desc":"Decorative pot red mum","combodesc":"A - Decorative pot red mum","price":"25.00","altid":"A"},
{"id":"PGT_MUM-B","desc":"Refill pot red mum","combodesc":"B - Refill pot red mum","price":"20.00","altid":"B"},
{"id":"PGT_MUM-C","desc":"Decorative pot white mum","combodesc":"C - Decorative pot white mum","price":"25.00","altid":"C"},
{"id":"PGT_MUM-D","desc":"Refill pot white mum","combodesc":"D - Refill pot white mum","price":"20.00","altid":"D"}];

In this example, we have inventory items that have an id, description, price and some additional fields. Here is the way the HTML SELECT would look:

<select id="zSaleItem" data-bind="value:currItem, options:invlist, optionsValue:'id', optionsText:'combodesc', optionsCaption:'Item Number'"></select>

In the data-bind, we still specify the value which ties to the field in the viewmodel that this input field is bound to. The rest of the data-binding creates all of the options to be in the select. The first field is “options” which links the array holding all the options to be used to populate the select. In this example, it is “invlist” which is the sample array shown above. The next field is “optionsValue”. This tells the binding what property of the object in the array to place in the value mapped to the viewmodel after a selection is made. “optionsText” specifies the property to be displayed as the text value of the option in the select. When there is not a value selected, you use “optionsCaption” to specify what to display. In this case, it is “Item Number”. Other examples could be “Choose”, “Select”, etc.

I have found this gives a lot of flexibility in defining how you want the SELECT to display and function.