Saturday, June 23, 2012

Scenario 1: Getting MVC 4.0 Release Candidate working with Knockout.js

Goal

To prove that I can make MVC 4.0 work with Knockout.js

Workflow

  1. Create the projects in Visual Studio 2010.
  2. Followed this guy’s steps for installing Knockoutjs using Nuget.  His instructions weren’t very complete, so I’m providing more detailed info here.

The _Layout.cshtml contents that worked for me are as follows.  Note the order of the scripts at the bottom:

        </div>

@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
<script type="text/javascript" src="http://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script type="text/javascript" src="~/Scripts/knockout-2.1.0.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>

I put the codeFile.js reference into the scripts section so it renders last.


@{
ViewBag.Title = "Test Page";
}

@section scripts
{
<script src="../../Scripts/codeFile.js" type="text/javascript"></script>
}


<div id="tagsList" class="box">
<div class="box-head">

After that, I got it to run (woo hoo, neat!):


asdf


Lessons learned



  • Use sections for scripts on the Razor pages

  • Use Nuget to get packages

  • Be clear in writing your stuff.  The guy that published his article was fast and it helped but it wasn’t very clear so I toiled too much. 

Next steps



  • Tweak this guy’s code so it works with my app / domain.

To do’s



  • Haven’t yet verified that I have knockout.mapping working

Other stuff I did and learned during this post



  • Checked out JSFiddle, which is pretty interesting.
  • Added Sharper Photo to Live Writer.
  • Downloaded and installed PreCode for pasting code in my blog in Live Writer. 
  • I found that Syntax Highlighter for Windows Live Writer sucks. 
  • Sharper Photo plug in for Live Writer sucks.  I’m downloading Clipboard Live now and hope it’s better.

1 comment:

Willie D. said...

Eric, Excellent post. Thanks for taking the time to improve on Steves post. You saved me a ton of grief. I'm trying to get up to speed on many things at once and the original was lacking in clarity (resulting in stress).