jsFiddle.net is an outstanding tool for sharing and collaborating on client-side development. Some key uses for it are:
- Keeping a scrapbook of useful samples that you can access anywhere.
- Sharing a sample of an issue that you are encountering. The exercise of reproducing the problem in its most simple form will often be enough to discover the issue on your own.
- Sharing a potential answer to another person’s question in jsFiddle helps you gain a deeper understanding of their issue and helps you move past suggestions into actual working solutions.
Using KnockoutJS in jsFiddle
The documentation for jsFiddle describes the basics of how to use the site. Here are the steps that you need to follow to get KnockoutJS working in it:
- In the Choose Framework section choose a recent version of jQuery:
In the Manage Resources section, add the other scripts that we need by entering a URL and hitting the plus icon. You will want to add them in the appropriate order listed. There are several locations to find hosted versions of these scripts, here are a couple of options for each:
jQuery Templates plugin:
- Latest: https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js
- “Safe” copy from KO downloads: https://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js
- Latest debug: https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js
- 1.12 release: http://github.com/downloads/SteveSanderson/knockout/knockout-1.1.2.js
Mapping Plugin (if you need it):
- Latest debug: https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.debug.js
Should look like this:
Forking/updating/Set as base
- Use the Update button when you are happy with your code. This will save a copy of the code under an incrementing revision number appended to the address (/1 to start).
- Use the Set as Base button to indicate that this revision should be loaded when the base address (no revision) of the fiddle is accessed.
- Use the Fork button to create a new copy of this fiddle. Very useful when starting with someone else’s sample or when you want to use a past fiddle of your own as a base.
Here are a couple of basic fiddles that can easily be forked:
- Latest jQuery templates, Knockout, and mapping plugin: http://jsfiddle.net/rniemeyer/gNJN5/
- KO 1.12 with jQuery templates from KO downloads: http://jsfiddle.net/rniemeyer/6Uf9S/
Quick mention of a few other great features of jsFiddle.net:
- Keyboard shortcuts – Ctrl+R runs it. Ctrl+S saves it. Ctrl up or down switches between the panes.
- If you are a member, you can also easily access all of your past fiddles. For example, here is a list of all of mine: http://jsfiddle.net/user/rniemeyer/fiddles/
I asked the other day if there was a way to support jsFiddle.net and was directed to a mousepad that you could order here, which I did. If you like the site, consider supporting them. Anyone else have other tips or tricks related to jsFiddle?