text: Knockout JS: Helping you build dynamic JavaScript UIs with MVVM and ASP.NET
  - Date: April 13, 2011 from 2:00PM to 2:25PM
  - Day 2
  - FRM08
  - Speakers: Steve Sanderson
  - 529,660 Views
  - 101 Comments
  Something went wrong getting user information from Channel 9
  Something went wrong getting user information from MSDN
  Something went wrong getting the Visual Studio Achievements
  Right click “Save as…”Slides (view online)
  Ste wto the MVVM pattern with Knockout, combined with ASP.NET to produce results that need to be seen to they release the videos in High Quality?
  Wow. This changes Everything.
  Awesome work.
  Ryan D. Hatch
  Brilliant ! The presentation is really good and the framework looks just awesome.
  Thanks
  Laurent
  Really great presentation, just totally on top of the subject (for good reason) Really exicted to try this out on a project.!
  Wow, awesome!! thanks! can't wait to try this!
  Wow, this really takes javascript driven UIs to the next level! Can't wait to use this!
  Thanks!!
  Steve is a presentation GURU. I love watching him work.
  As an outsider (open-{source,standards} fanboi), this is the first thing seen on mix that's usuful.
  For me, mix went like this: bla bla, chrome is slow, bla bla, have you seen how slow chrome is, bla bla, WP7 is the best etc.
  Had i've been an MS developer, i'd be really scared right now. After evangelizing Silverlight as the light of the world, MS says: oops, sory, our plan didn't quite work out, use HTML5, we have the best implementation, so write your site/spp so it'll work best on IE and it will be slow as ___ on chrome and FF.
  I realize MS goal is to sell S/W, but beyond that what's its plan????
  Meni, as a Silverlight dev, I have to agree. MVVM is one of the huge reasons to use Siverlight. This really makes JavaScript code simple for form to JSON object binding.
  What advantage does SL have at this point over JavaScript? You certainly don't use Silverlight for it's styles!
  Friggin amazing! I am itching to start using this.
  @meni; Maybe I am speaking out of turn, but it was always obvious that Silverlight would fail and would eventually be abandoned - or at least relegated to some narrow specialist role.
  OH my God. Brilliant idea/framework.
  Good job.
  Once again, Mr.Sanderson brings us tools that are powerful and straight to the point. I
  is there any functionality to destroy observable() thing, suppose after some event we know that now we dont need some dom-element and its related ViewModel, so destroying that model will decrease memory usage on browser.
  Great presentation, glad I found this library, it reduces a lot of the manual labor in creating rich interfaces and having organized javascript code. I was able to implement it in an existing asp.net project with ease, it's fun to learn and once you get used to it you can do great things very easily.
  unobtrusive javascript anyone?
  @Meni and @Howie I think you're missing the point of Silverlight.
  Silverlight is not, and was not, EVER a competitor to HTML5.
  Silverlight was about creating a .NET platform using WPF to create rich experiences. This is expanding into effectively native Silverlight applications both for desktops and for embedded systems.
  Silverlight was meant to alter the technology landscape dramatically, and it's been successful at that. Industry is slow to adopt change and is starting to catch up.
  Wow, I'm really impressed. I'll definitely be using this library.
  >>IMAGE.
  Is the complete code posted here?
  Great presentation, and awesome library.
  @Howie
  "What advantage does SL have at this point over JavaScript?"
  Greatest factors:
  C#, much more sophisticated tools and libraries
  Wow! This is SICK! Game changer - WINNING! Thanks...
  Wonderful! Thanks, Steve!
  Where can get the sample code you used in demo?
  Best presentation at MIX 11.
  Really amazing software and demonstration. I have 11 pages of notes. For me, this library will have the same impact that JQuery did. Truly amazing setup.
  for anyone trying out the code shown in the video note that
  data-bind="click:remove" works
  but
  data-bind ="click:remove" will fail to call the remove function
  Also if your using asp.net forms make sure you don't call a postback.
  This can be done by making sure the knockout controls are placed before the <form .. declaration.
  knockoutJs look very good
  My opinion only.
  I dislike this because the way you have to know all the syntax and code inside a single binding is tremendous and me without any kind of object intellisence is a no go.
  Long life to C# + Silverlight and Microsoft tools. Thanks
  I love the thought of an improved javascript-ui experience based on clean code using accepted design patterns. MVVM has become wildly popular in WPF and then Silverlight...and now hopefully will find a place in web development.
  Can't wait for your next MVC3 book!
  I think the discourse when well. I look forward to apply knockoutjs to my projects.
  Write well, support you to move on and look forward to your next article.
  have never read such a excellent article and I am coming back tomorrow to continue
  reading!
  I dislike this because the way you have to know all the syntax and code inside a single binding is tremendous and me without any kind of object intellisence is a no go.
  IM goin to love it.awsome to you.
  very good presentation. It is good to know that JavaScript also allows bindings and MVVM.
  I'll definitely look into Knockout JS. Seems awesome!
  Also looking forward to the next MVC3 book.
  That's really awesome. I've been considering to use BackBone.js in our new project, but Knockout is a clear winner. Binding is much easier, and code looks much cleaner.
  That's really awesome. I've been considering to use BackBone.js in our new project, but Knockout is a clear winner. Binding is much easier, and code looks much cleaner.
  where are the zips/download for this code demo- The download of the slide just has 'DEMO' where the code is meant to be.
  Where can I get the code file that he typed up during the demo? Would be very helpful.
  What editor is he using in the demo? It looks neat! :)
  This is Good video and presentation. It change the whole thing of developers.
  the video quality is extremely bad. Also one accustomed to YouTube would expect to switch video quality from the video player (and go on at the same video timepoint with the playback), not just have separate download links (missing altogether from this presentation which makes it even worse)
  oops, the high quality video links are under the video (at other Ch9 are at the right hand side)
  @George Birbilis: Hey George sorry for the confusion about the links. We would have prefered to be consistent, but event videos use the entire width of the page so we needed to change the layout of the page a bit.
  This is a very low quality video. I couldn't read the text in the default mode.
  Looks like an excellent framework, thanks for the overview
  Has this been deploy to a production site, it looks it can solve simple scenario, but it needs lots obscure code to make it work for real life case.
  Thanks Steve
  Perfect Presentation
  If you want to try it out yourself without having to download anything, just go to.
  Looks impressive.. We're starting to use this on a project I'm involved in now.
  Thanks
  Great Job! Definitely worth any minute
  What are those slides? 9 slides?
  hum....
  for some reason, I could not get remove function work... is there any reason? I have exactly same code as on the video, but it does not remove it. has anyone got it work?
  @liam: I could not see any difference between the statement below, or I need to take a break:)? I could not get it work...
  data-bind="click:remove" works
  but
  data-bind ="click:remove" will fail to call the remove function.
  any idea?
  Thats a great library. We can start by this video only. It has less code as compared to jquery for
  same purpose and highly integrated with JSON.
  Excellent presentation and a great presenter. Thank you!
  wow, amazing ,I cant wait to use it.
  Are you stupid SylverLight man I am never installing that
  Could use a better quality video.
  But looks amazing. Good work!
  amazing,,, glad I could visit your website
  dfgsdfg
  Very impressive, looking forward to using this. Was looking around for ways to handle the JS for an HTML5 game and this vid has sold me.
  is this a joke or what? cant see the words!
  The guy is an absolute genius :)
  For people interested in using KnockoutJS in more elaborate web apps check out my tutorial series at
  2 things:
  1. I need to follow this guy
  2. I want to have a spikey head avatar.
  Sounds like everyone that is blown away by ko has finally seen the power of change tracking, something that Silverlight has had for ages but has been avoided by those commenting.. and as a SL developer AND MVC developer, yes this is good stuff but its only new to MVC.
  Hi all,I have the following code in my controller action:
  public class ShipperController : Controller
  {
  FxDataClassesDataContext dcfx = new FxDataClassesDataContext();
  public ActionResult GridActiveQuotes(string sidx, string sord, int page, int rows)
  {
  int pageIndex = Convert.ToInt32(page) - 1;
  int pageSize = rows;
  int totalRecords = dcfx.FxVwQuotes.Count();
  int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
  var opp = (sord == "asc") ?
  dcfx.FxVwQuotes
  .Skip(pageIndex * pageSize)
  .Take(pageSize)
  :
  dcfx.FxVwQuotes
  .Skip(pageIndex * pageSize)
  .Take(pageSize);
  var jsonData = new
  {
  total = totalPages, // Work item
  page = page,
  records = totalRecords, // Work item
  rows = (
  from Quotes in dcfx.FxVwQuotes
  select new
  {
  id = Quotes.Quote_ID,
  cell = new string[] {
  Quotes.Quote_ID.ToString(),
  Quotes.Transporter_Name.ToString(),
  Quotes.Transporter_Reputation_Score.ToString(),
  Quotes.Opportunity_Cargo_Description.ToString(),
  Quotes.Opportunity_Origin.ToString(),
  Quotes.Opportunity_Origin_Country_Code.ToString(),
  Quotes.Opportunity_Destination.ToString(),
  Quotes.Opportunity_Destination_Country_Code.ToString(),
  Quotes.Quote_Currency.ToString(),
  Quotes.Quote_Price.ToString()
  }
  }).ToArray()
  };
  return Json(jsonData, JsonRequestBehavior.AllowGet);
  }
  }
  Is there a way i can display this array in a listview using knockoutjs? PLEASE.
  I like the way you show the presentation and the video. =)
  "Knockout library builds on advanced jQuery and JavaScript" I just need to ask will they work with HTML5???
  Steve, thanks a lot for your excellent presentation! It's very clear and helpful. You're the best presenter I have ever watched.
  Knockout is really what's missed in between jQuery and the ease of creating rich interactive UI. So thanks to Knockout this gap was filled, and doesn't exist anymore.
  It would be very tempting to create a MVC 3 Html helper that will generate the necessary jQuery, javascript and knockoutjs script to create an editable iterating templated control (a listview like in WPF that is editable and can be templated). I'm off to learn more about KnockOutJs and see if I can create a html helper that receives a type of an object, actions for loading (getting), inserting, updating and removing items in the list (mvc controller actions) and allow custom templating of the rows (default if not set). However, you also have the Razor for-each templated function demonstrated by Phil Haack.
  thanks alot
  thanks a lot
  the video session is really great and useful looking forward from you to update more video sessions regarding knockout js
  Thank you
  Am I the only one who noticed that he instantiated the "friend" class and didn't actually use the instantiated object (this)?
  He used the returned literal json object, the "new" keyword was actually useless.
  One of the best presentations I have seen.
  Straight to the point, simple enough to convey a complex message in an understandable way.
  How can I bind the JSON to display into a table using knockoutJS?
  I mean the UL-LI paradigm is common but can we do this for implementing a table?
  and what will searchengiens see if the view is rendered with js ?
  Great presentation but seriously, how jacked on caffeine is this guy lol?
  Wasn't this guy also in the 'The Great Escape'? I think he forged all the documents for them.
  Brilliant! Both, the presentation and the ko. Thanks Steve.
  Excellent video!!! I was in dilemma to choose a framework in between knockout.js & backbone.js..Now i know what to choose..
  Excellent Presentation and Excellent Framework. Like MS's attitude in catching up with the rest of the industry to promote OpenSource. MS can make money on many other things. But Code level and frameworks can remain OpenSource. Great Stuff!!
  Video doesn't work in Chrome...there is a sound, but no picture
  After watching , my life becomes easy
  Great video! Don't blink or cough while watching, though; you'll miss a lot from the break-neck pace!
  Excellent video and presentation. Can't wait to try this.
  Too bad the video player doesn't support firefox, why type of developer wouldn't support firefox? Oh yea promote open source Sasi, chrome is only part open source.. ie and safari certainly aren't open source either.. firefox.. oh yea.
  Firefox support? Can't you just put this on YouTube? OMG!
  @Shawn Welch: so, these videos are old... and we didn't use to make webm versions of our videos back then, so Firefox (since they decided not to support h264) can't play them. This isn't a choice to ignore Firefox or anything like that (any current video on C9 will support Firefox for example), but simply just a matter of old content not having one specific file format.
  in this example in my app the same example didn't render that template and it shows
  {{ each(index,friend) friends}} • ${ friend.name }
  {{/each}}
  why?
  One Knockout presentation.
  Two years later, still great!
  Is there a source code download for this demo?
  It was awesome breathless ..i still lean on this video when ever i start a new mvvm model in knock out to refresh my basics.
  today i clicked it on video to learn knockoutjs and it says error occurred !!
  Remove this comment
  Remove this threadclose