KnockoutJS: "My HTML node has disappeared"

This is probably the one question I get asked the most about KnockoutJS. Why is my 'some random html node' not apearing on my page? And this is often followed up with a code sample similar to: <!-- ko foreach: myList --> <th data-bind="text: label"> <button>*</button> </th> <!-- /ko --> In this case the button node isn't being shown in the rendered html. Now the reason for this is that when you use the data-bind="text: label" attribute on a node, knockout…

Read More

JavaScript can double your codebase so make sure you need it first

There's been a JavaScript/SPA revolution in the past couple of years. Its now back in fashion and a lot of people are using it. I'm here to tell you it might not be worth it and that you should stick to server side code. I use JavaScript everyday. Our main application is a SPA (kind of) and it works well. However, it did take a long time to write and our codebase is a lot bigger and more complicated because of it. It's made me realise that you should think very carefully before jumping on the bandwagon. However, there…

Read More

Saving Key Strokes can bring a World of Pain

Developers seem to fall into two schools of thought on this one. Limit the amount of code you write or leverage the syntax to assure no mistakes are made. I've flirted between the two, but right now I'm heavily in favor of the latter approach. What am I talking about? Well two things in particular. Firstly the use of chaining declarations in JavaScript and secondly omitting curly braces in single line if statements. Both of these things have caught me out recently. Let me give you some examples: Chaining Declarations in JavaScript function SomeObject() { var span = document.createElement('span'), li…

Read More

Alternatives on the Javascript Constructor Pattern

Had a discussion in @jabbr recently about different ways of implementing the constructor/prototype pattern in javascript and a couple popped up. 1. Implementing the constructor as a function and all the prototype methods in one go: function MyObject(foo, bar) { this.foo = foo; this.bar = bar; }; MyObject.prototype = { constructor: MyObject, someFunction: function() { console.log(foo + " and " + bar); }, someOtherFunction: function() { } }; 2. Implementing the constructor as a function and the prototype methods individually: function MyObject(foo, bar) { this.foo = foo; this.bar = bar; }; MyObject.prototype.someFunction = function(){ console.log(this.foo + " and " + this.bar); }; MyObject.prototype.someOtherFunction…

Read More

Custom JQuery Deferred Handlers

As the codebase at work gets bigger and bigger I've been trying to think of ways to simplify some of the simple create and update javascript functionality. Our application works by having a context that you can define a resource for then use to perform the CRUD functionality. For example: var fooContext = context.define('foo'); var createButton = function() { fooContext.create(foo).then(function(response) { // Something has been created. Navigate off }) }; var updateButton = function() { fooContext.update(foo).then(function(response) { // Something has been updated. Update message }) }; Now there are a lot of objects in our application so this code appears a…

Read More

Mousetrap Bind Elements

Shortcut keys are becoming more and more important in today's web, and libraries like mousetrap are a god send when you want to implement them on your site. It allows you to assign various shortcut keys to callback functions. It even allows key combinations. To help simplify the implementation I've written an extension that will automatically bind the click event of DOM element to a shortcut key, using a data attribute. For example: <a href="http://www.stackoverflow.com" data-mousetrap="ctrl+s">Stack Overflow</a> I've set up a couple of examples…

Read More

Knockout JSON Viewer Update

Knockout JSON Viewer Update

I've added a couple of additional features to my jsonViewer, Subscriber count and embedded stylesheet. The green number now shows how many subscribers the observable has, which is good. However, there are a couple of caveats. Firstly, it's important to note, that if a child observable has a subscriber then its parents subscriber count will increment by one. Also if the observable is bound to a DOM object it will increment the subscriber count. Its not just the number of subscribing functions. In addition to this I've embedded the stylesheet in the javascript. As this is debugging tool I wanted…

Read More

Knockout JSON Viewer

Knockout JSON Viewer

Would you know it. Starting another blog. Just wanted to introduce my jsonViewer for knockout. The aim is to make it a little easier to debug your view models. As it can be really difficult to get an idea of what's going on behind the scenes. It shows you the view model as it currently is and the number of times each of the observables (and none) properties have changed. Check it out on github or the examples. Its not finished yet, things to come are: showing the number of subscribers, allowing the view model tree to be expanded/collapsed…

Read More