Knockout JS: Helping you build dynamic JavaScript UIs with MVVM and ASP.NET

Download this episode

Download Video

Description

Steve Sanderson delivers KnockoutJS in this lightening talk. Learn how the Knockout library builds on advanced jQuery and JavaScript techniques to make even the most complex data-filled HTML forms a breeze. We’ll see jQuery, jQuery templating, JSON and live data banding applied wto the MVVM pattern with Knockout, combined with ASP.NET to produce results that need to be seen to believed.

For more information, check out these courses on Microsoft Virtual Academy:

Day:

2

Level:

200

Code:

FRM08

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      Luis Fernando

      when they release the videos in High Quality?

    • User profile image
      rdhatch

      Wow.  This changes Everything.

      Awesome work.

      Ryan D. Hatch

    • User profile image
      LaurentKempe

      Brilliant ! The presentation is really good and the framework looks just awesome.

      Thanks

      Laurent

    • User profile image
      joshperry

      Really great presentation, just totally on top of the subject (for good reason) Really exicted to try this out on a project.!

    • User profile image
      Thomas Shields

      Wow, awesome!! thanks! can't wait to try this!

    • User profile image
      koolraaga
      Excellent Presentation. knockOut seems nice. going to start experimenting with it ASAP. Regards and thanks kRK
    • User profile image
      Skywalker

      Wow, this really takes javascript driven UIs to the next level! Can't wait to use this!

      Thanks!!

    • User profile image
      Scott Hanselman

      Steve is a presentation GURU. I love watching him work.

    • User profile image
      Meni

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

    • User profile image
      Howie

      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!

    • User profile image
      Flytzen

      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.

    • User profile image
      Henrique

      OH my God. Brilliant idea/framework.
      Good job.

    • User profile image
      Holt

      Once again, Mr.Sanderson brings us tools that are powerful and straight to the point. I

    • User profile image
      praveenpras​ad

      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.

    • User profile image
      indigo0086

      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.

    • User profile image
      Alex

      unobtrusive javascript anyone?

    • User profile image
      Chris Marisic

      @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.

    • User profile image
      Richard.Hein

      Wow, I'm really impressed.  I'll definitely be using this library. Big Smile

    • User profile image
      Ryoushin

      Hmmm... I think Sys.Observer was ( Sad ) more "Silverlight-ic" and felt comfortable with it, but you MS guys are going to abandon the Ajax 4 js framework (sad about it) so we have to move on. Why then don't you put more emphasys on jQuery "link" plugin (which is being written by MS itself) instead of broadening the spectrum of js MVVM frameworks?

    • User profile image
      rhm

      , Ryoushin wrote

      Hmmm... I think Sys.Observer was ( Sad ) more "Silverlight-ic" and felt comfortable with it, but you MS guys are going to abandon the Ajax 4 js framework (sad about it) so we have to move on. Why then don't you put more emphasys on jQuery "link" plugin (which is being written by MS itself) instead of broadening the spectrum of js MVVM frameworks?

      DId you miss the part at the start where he says that it's not a Microsoft project? It's the author's personal open source project - just because it's presented at Mix, it doesn't mean that it's official Microsoft policy.

      Besides, why should there just be one way of doing any particular thing? Developers in the Microsoft ecosystem have really suffered in the past from Microsoft determining the 'one true way' to do a particular thing when Microsoft's choice of technology has turned out to not be very good (ASP.NET AJAX being a prime example). I rather like the new Microsoft way to let a bunch of different libraries slug it out and let the developers see which is more popular. I'll bet we see more community-driven libraries and tools win out over the 'designed in Redmond' equivalents.

    • User profile image
      Rob

      Is the complete code posted here?

    • User profile image
      Will Peavy

      Great presentation, and awesome library.

    • User profile image
      Tom

      @Howie
      "What advantage does SL have at this point over JavaScript?"

      Greatest factors:
      C#, much more sophisticated tools and libraries

    • User profile image
      tdryan

      Wow!  This is SICK!  Game changer - WINNING!  Thanks...

    • User profile image
      Ryan Liu

      Wonderful! Thanks, Steve!
      Where can get the sample code you used in demo?

    • User profile image
      Dan Miser

      Best presentation at MIX 11.

    • User profile image
      Zachary Scott

      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.

    • User profile image
      liam

      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


    • User profile image
      Marc Roussel

      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.

    • User profile image
      eDevlet

      www.Edevlete.NET Thanks

    • User profile image
      Dan Arnold

      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!

    • User profile image
      Jphin

      I think the discourse when well. I look forward to apply knockoutjs to my projects.

    • User profile image
      borse prada

      Write well, support you to move on and look forward to your next article.

    • User profile image
      burberryskj​orte

      have never read such a excellent article and I am coming back tomorrow to continue

      reading!

    • User profile image
      burberryskj​orte

      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.

    • User profile image
      ROSELIZ1979

      IM goin to love it.awsome to you. Angel

    • User profile image
      Nick Polyak

      very good presentation. It is good to know that JavaScript also allows bindings and MVVM.

    • User profile image
      Marcus Andersson

      I'll definitely look into Knockout JS. Seems awesome!

      Also looking forward to the next MVC3 book.

    • User profile image
      Serge

      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.

    • User profile image
      Serge

      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.

    • User profile image
      timberzen

      where are the zips/download for this code demo- The download of the slide just has 'DEMO' where the code is meant to be.

    • User profile image
      John

      Where can I get the code file that he typed up during the demo? Would be very helpful.

    • User profile image
      John

      What editor is he using in the demo? It looks neat! :)

    • User profile image
      Jayesh Dhobi

      This is Good video and presentation. It change the whole thing of developers.

    • User profile image
      George Birbilis

      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)

    • User profile image
      George Birbilis

      oops, the high quality video links are under the video (at other Ch9 are at the right hand side)

    • User profile image
      Duncanma

      @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.

    • User profile image
      Cyril Gupta

      This is a very low quality video. I couldn't read the text in the default mode.

    • User profile image
      Brendan Rice

      Looks like an excellent framework, thanks for the overview

    • User profile image
      Fred

      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.

    • User profile image
      Nenu

      Thanks Steve

    • User profile image
      Behnam

      Perfect Presentation

    • User profile image
      JHanauer

      If you want to try it out yourself without having to download anything, just go to http://learn.knockoutjs.com/.

    • User profile image
      James Radford

      Looks impressive.. We're starting to use this on a project I'm involved in now.

      Thanks

    • User profile image
      ITOriginator

      Great Job! Definitely worth any minute Smiley 

    • User profile image
      Pedro Luz

      What are those slides? 9 slides?

      hum....

    • User profile image
      Anarchist​Geek

      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?

    • User profile image
      Anarchist​Geek

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

    • User profile image
      mukul_narad

      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.

    • User profile image
      hosamaly

      Excellent presentation and a great presenter. Thank you!

    • User profile image
      Neeo

      wow, amazing ,I cant wait to use it.

    • User profile image
      Hristo

      Are you stupid SylverLight man I am never installing that

    • User profile image
      Kevin

      Could use a better quality video.
      But looks amazing. Good work!

    • User profile image
      bunggsu

      amazing,,, glad I could visit your website

    • User profile image
      sgdf

      dfgsdfg

    • User profile image
      HotCustard

      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.

    • User profile image
      tzvi

      is this a joke or what? cant see the words!

    • User profile image
      Patrick

      The guy is an absolute genius :)

    • User profile image
      Philippe Monnet

      For people interested in using KnockoutJS in more elaborate web apps check out my tutorial series at http://blog.monnet-usa.com/?p=354

    • User profile image
      scotty

      2 things:
      1. I need to follow this guy
      2. I want to have a spikey head avatar.

    • User profile image
      geee

      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.

    • User profile image
      JeffWN

      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 HELP

    • User profile image
      iPhone 4s contract

      I want to express thanks to you for rescuing me from this particular challenge. Right after surfing throughout the the web and meeting notions which are not beneficial, I thought my entire life was well over. Existing devoid of the solutions to the issues you’ve resolved as a result of the short article is a critical case, and the kind which may have in a wrong way affected my entire career if I hadn’t discovered your website. Your personal expertise and kindness in taking care of all the stuff was useful. I don’t know what I would have done if I had not come across such a solution like this. I can also now relish my future. Thanks for your time very much for your reliable and amazing help. I won’t think twice to recommend your web page to any individual who wants and needs direction on this topic.

      http://www.appleiphone4sdeals.co.uk/iphone-4s-contract.html

    • User profile image
      Daniel

      I like the way you show the presentation and the video. =)

    • User profile image
      sameday loans no credit checks

      "Knockout library builds on advanced jQuery and JavaScript" I just need to ask will they work with HTML5???

      http://www.samedayloansnocreditchecksuk.co.uk/

    • User profile image
      Dmitry Pavlov

      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.

       

    • User profile image
      Tore Aurstad

      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.

    • User profile image
      ahmed

      thanks alot http://www.haeaty.com

    • User profile image
      tarek11011

      thanks a lot

    • User profile image
      rajashekar

      the video session is really great and useful looking forward from you to update more video sessions regarding knockout js

      Thank you

    • User profile image
      Davide

      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.

    • User profile image
      Noam Honig

      One of the best presentations I have seen.

      Straight to the point, simple enough to convey a complex message in an understandable way.

    • User profile image
      Aditya

      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?

    • User profile image
      daslicht

      and what will searchengiens see if the view is rendered with js ?

    • User profile image
      Jacob

      Great presentation but seriously, how jacked on caffeine is this guy lol?

    • User profile image
      SleepyBobos

      Wasn't this guy also in the 'The Great Escape'? I think he forged all the documents for them.

    • User profile image
      j0tape

      Brilliant! Both, the presentation and the ko. Thanks Steve.

    • User profile image
      YogeshP

      Excellent video!!! I was in dilemma to choose a framework in between knockout.js & backbone.js..Now i know what to choose.. 

    • User profile image
      Sasi

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

    • User profile image
      artem

      Video doesn't work in Chrome...there is a sound, but no picture

    • User profile image
      Shakeel

      After watching , my life becomes easy

    • User profile image
      Chris

      Great video! Don't blink or cough while watching, though; you'll miss a lot from the break-neck pace!

    • User profile image
      Niamath Azeez

      Excellent video and presentation. Can't wait to try this.

    • User profile image
      dibbz

      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.

    • User profile image
      Shawn Welch

      Firefox support? Can't you just put this on YouTube? OMG!

    • User profile image
      Duncanma

      @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.

    • User profile image
      julian

      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?

    • User profile image
      Murali

      One Knockout presentation.

    • User profile image
      SURFThru

      Two years later, still great!

      Is there a source code download for this demo?

    • User profile image
      smallipudi

      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.

    • User profile image
      himanshu

      today i clicked it on video to learn knockoutjs and it says error occurred !!

    • User profile image
      farifairis

      4years later
      still awesome presentation!!
      thank you!

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.