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
- 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?