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

Sign in to queue

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

Download

Download this episode

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

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!

Add Your 2 Cents