KnockoutJS Hello World

Knockout (aka KnockoutJS) is a javascript library which makes it relatively easy to implement the MVVM pattern in your web UIs.  My intent here is to merely demonstrate how quickly you can put together a working demo of Knockout’s capabilities.

There are a ton of online resources which go into greater depth on Knockout.  For example  knockoutjs.com and knockmeout.net.

On to the demo…

Step 1: Get Knockout.js

You can download knockout.js from the knockoutjs.com download page.  You also have the option to use a content delivery network(CDN), but let’s assume you want the ability to test your page offline.

Save the file to your machine.

Step 2: Create HelloKnockout.html

Using any text editor, create a file named HelloKnockout.html.  Save the file to the same location as your knockout.js file.

Step 3: Add an input box

Insert the following code to create a page consisting solely of an input box.

<html>
<body>
<input />
</body>
</html>

So far it’s not anything special.  Load this file in a browser and you’ll see an input box which accepts text.

Step 4: import knockout.js

Add a head section with a script tag which imports your downloaded knockout.js file.


<html>
<head>
<script src="knockout-3.3.0.js"></script>
</head>
<body>
<input />
</body>
</html>

I’m using version 3.3 of the knockout library.  Make sure the name matches the file you downloaded.

Step 5: Add a view model

Add a script tag below your input tag, and create a variable which will represent your model.

<html>
<head>
<script src="knockout-3.3.0.js"></script>
</head>
<body>
<input />
<script>
var viewModel = {
name: ko.observable("John")
}
</script>
</body>
</html>

This essentially tells knockout to keep track of viewModel.name and initialize it to “John”.

Step 6: Add binding instructions for your view

Add a data-bind attribute to your input tag.

<html>
<head>
<script src="knockout-3.3.0.js"></script>
</head>
<body>
<input data-bind="value: name" />
<script>
var viewModel = {
name: ko.observable("John")
}
</script>
</body>
</html>

This says that you want to keep the input tag’s value in sync with the model’s name member.

Step 7: bind the input box to the model

Call the knockout applyBindings method.

<html>
<head>
<script src="knockout-3.3.0.js"></script>
</head>
<body>
<input data-bind="value: name" />
<script>
var viewModel = {
name: ko.observable("John")
}
ko.applyBindings(viewModel);
</script>
</body>
</html>

This will apply the viewModel bindings across the entire page.  When you load the page you’ll see John in the input box.  As you change input box value, you’ll also update the viewModel.name member.  How can we be sure?

Step 8: Bind a second tag to the view model

Add a span below the input tag and bind its text to viewModel.name.

<html>
<head>
<script src="knockout-3.3.0.js"></script>
</head>
<body>
<input data-bind="value: name" />
<br >
<span data-bind="text: name"></span>
<script>
var viewModel = {
name: ko.observable("John")
}
ko.applyBindings(viewModel);
</script>
</body>
</html>

Now, whenever the input tag value is synced with the viewModel.name, that same value is synced with the span’s text.

Step 9: Get faster updates

By default, the viewModel is updated when the input tag loses focus.  One option is to perform the update on key down events.  This will sync content with each keystroke.  Add the following valueUpdate data-bind setting.

<html>
<head>
<script src="knockout-3.3.0.js"></script>
</head>
<body>
<input data-bind="value: name, valueUpdate:'afterkeydown'" />
<br >
<span data-bind="text: name"></span>
<script>
var viewModel = {
name: ko.observable("John")
}
ko.applyBindings(viewModel);
</script>
</body>
</html>

Now, the model and span are refreshed as you type.

There you have it.  I hope this puts you on the road to becoming a knockout rock star.

MacBook Pro Won’t Recognize Canon HF S100 Camcorder

I’ve seen several posts about Macs not recognizing Canon camcorders.
The following allowed me to see my camcorder in Finder and import items via drag and drop.

  1. Connect camcorder to power source
  2. connect camcorder to USB port
  3. Turn on camcorder
  4. Place camcorder in dual-mode; photo and video
  5. Press camera/play button

There was a delay of a few minutes while the thumbnails were created.

Afterward, I was able to see the SD card in Finder and directly access the content.

Self Hosting WF 4.5 services using C# expressions

If you attempt to self-host a windows workflow 4.5 service which uses C# expressions, you may see an error similar to the following:


Operation ‘XYZ|{http://tempuri.org/}IXYZ’ on service instance with identifier ’16800afc-0f50-4fef-871d-fcdc0b866704′ cannot be performed at this time. Please ensure that the operations are performed in the correct order and that the binding in use provides ordered delivery guarantees.

IIS hosts the service without any problems.

Check out the link below for additional info and steps to use compilation as a possible workaround.

https://connect.microsoft.com/VisualStudio/feedback/details/741537/cannot-self-host-a-workflow-service-using-c-expressions

404.3 errors hosting WF services in IIS 8

While hosting workflow service files (XAMLX) in IIS 8, you may receive the following error:

HTTP Error 404.3 – Not Found

The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.

Enabling WCF HTTP Activation resolved the issue for me.

  • Open the Windows Features screen
  • drill down to .NET Framework 4.5  Advanced Services-> WCF Services
  • Check HTTP Activation

After this change both .xamlx and .svc files appeared in the IIS Handler Mappings section, and the 404.3 errors stopped.

Miami Heat Streak Ends at 27

The Miami Heat win streak is over at 27 thanks to the Chicago Bulls.

It’s ironic that the Bulls used Jordan Rules-Light to win.
I wouldn’t call it dirty though.
Hinrich cradled LeBron. Laimbeer would have made sure LBJ hit the ground first

It’s too bad D Rose didn’t play. Even if he just gave a few minutes it would have become the stuff of legend for inspiring his team.

I get the sense that, if healthy, Miami will come out of the gate strong next year and go for 73 wins.

Please Accept My Apology

Now that the 2012 NFL regular season has concluded, I feel obliged to offer an apology to several parties whose judgement I questioned prior to opening day.

Regardless of what happens going forward, their decisions have already provided positive returns.

Paul Allen and Pete Carroll
Picture 1 of 7

I was never sold on Carroll's NFL potential and felt Jim Mora deserved more of a chance. It's been three years and the partnership has delivered a division championship and two playoff appearances.

How to Watch The Dark Knights Rises UltraViolet Version on XBox 360

Hopefully this post can save someone the frustration which I experienced when trying to watch the cloud version of The Dark Knight Rises on my XBox 360.

This was my first experience with UltraViolet(UV).

After much ado, the following steps enabled me to get the UV version of The Dark Knight Rises streaming through Xbox Live.

  1. Create an UltraViolet account at http://www.uvvu.com
  2. Create a Vudu account at http://www.vudu.com; during registration you’ll have the option to link to your UV account
  3. Go to http://www.vudu.com/movies/#!content/211931/The-Dark-Knight-Rises
  4. Click the Redeem link
  5. Install the XBox Live Vudu application
  6. Go to the “My Movies” section
  7. Click on The Dark Knight Rises
  8. Enjoy!

Breaking Bad Episode 5.8 “Gliding Through All”

Going in I had a feeling that this episode would end with a close up of Hank simply saying “Walt” or “shit”.  The solemn look on Hank’s face spoke volumes.  I fear that Hank would have been better off never getting a fix on his white whale.

Dean Norris has really been great this season and deserves emmy consideration.

I liked the juxtaposition of Walt’s apex and Hank’s low point.

Where does the show go from here? Hank has all the power and will no doubt attempt to use it with minimal carnage; but this is Breaking Bad.  I could barely watch the prison murders and I have no emotional attachment to those guys.  I can’t imagine what’s in store for our familiar faces.

In Walt’s race to the mountain top he sure added a lot of links to his chain of potential liabilities.  He took out those ten guys, but how many of them could tie Walt to the operation?  In the last few months he has met face to face with several individuals who are likely to be in a room with law enforcement in the near future.  Mike’s words about Walt know his place are ringing loud and true.  “Say My Name” indeed.

What’s up with Hank’s limp?  Is it psychosomatic?

I wonder if episode 9 will pick up right where episode 8 ended.

For the show’s sake, I hope there was a scene earlier in the season in which it was shown, or inferred, that Gale gave Walt that book.  Otherwise it seems a bit contrived.

No man, woman, or child is guaranteed to escape the wake of Walt’s storm.