At work we are starting out on a web application which we will be using KnockoutJs on and jsfiddle will be invaluable, I have been watching the Pluralsight and Tekpub videos on KnockoutJs and wanted to blog about jsfiddle after watching John Papa talk about it in one of his KnockoutJS modules.
John’s courses on Pluralsight are awesome and I highly recommend them, the one I refer to was his course on Buiding HTML 5 apps (middle one below):-
Ok less talk more action:-
- Browse to jsfiddle.net and then sign up for an account, the reason you want an account is so you can save fiddles for later and come back to them in the future.
- If you see a blog post that mentions a js fiddle and you want to it then I will show you how to use it below:-
How to create your first fiddle using jsfiddle
- For simplicity we will use the demo from the knockoutJs website which has fantastic tutorials on how to use knockout.
- Since this demo is going to use KnockoutJS we will add a reference to KnockoutJS
- Browse to https://github.com/SteveSanderson/knockout/downloads and then copy the location to the latest version of the knockoutJS library, at this moment in time this link to the file we need is :- https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js
- To add this to our jsfiddle look at the left hand side looking for ‘Add Resources’ and then paste in the link to the js file and then click the plus icon.
- The screen is split into 4 sections:-
- Top Left is for HTML
- Top Right is for any css styling you wish to add/try out
- Bottom right shows the output you would see in the browser
- Add the following into the top left hand window pane (Html):-
<p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p>
- And thats it we are ready to save the fiddle and test it out.
- To test out our code click Run up at the top and you can use your favourite browser to check for any errors that may arise as you play around with the code.
- A very simple demo but you get the idea on whats possible, and if like me your trying to learn KnockoutJS its an invaluable tool.