Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

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

Download

Right click “Save as…”

Slides (view online)

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:

Follow the Discussion

  • Luis FernandoLuis Fernando

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

  • Excellent Presentation. knockOut seems nice. going to start experimenting with it ASAP. Regards and thanks kRK
  • SkywalkerSkywalker

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

    Thanks!!

  • Scott HanselmanScott Hanselman

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

  • MeniMeni

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

  • HowieHowie

    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.

  • HenriqueHenrique

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

  • HoltHolt

    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.

  • AlexAlex

    unobtrusive javascript anyone?

  • Chris MarisicChris 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.

  • Richard Anthony HeinRichard.Hein Stay on Target

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

  • RyoushinRyoushin Sator Arepo Tenet Opera Rotas

    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?

  • rhmrhm

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

  • RobRob

    Is the complete code posted here?

  • Will PeavyWill Peavy

    Great presentation, and awesome library.

  • TomTom

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

  • Ryan LiuRyan Liu

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

  • Dan MiserDan Miser

    Best presentation at MIX 11.

  • Zachary ScottZachary 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.

  • liamliam

    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


  • Marc RousselMarc 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.

  • eDevleteDevlet

    www.Edevlete.NET Thanks

  • Dan ArnoldDan 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!

  • JphinJphin

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

  • borse pradaborse prada

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

  • burberryskjorteburberryskj​orte

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

    reading!

  • burberryskjorteburberryskj​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.

  • IM goin to love it.awsome to you. Angel

  • Nick PolyakNick Polyak

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

  • Marcus AnderssonMarcus Andersson

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

    Also looking forward to the next MVC3 book.

  • SergeSerge

    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.

  • SergeSerge

    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.

  • JohnJohn

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

  • JohnJohn

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

  • Jayesh DhobiJayesh Dhobi

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

  • George BirbilisGeorge 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)

  • George BirbilisGeorge Birbilis

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

  • Duncan MackenzieDuncanma "yeah that's awful close, but that's not why I'm so hard done by"

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

  • Cyril GuptaCyril Gupta

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

  • Brendan RiceBrendan Rice

    Looks like an excellent framework, thanks for the overview

  • FredFred

    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.

  • NenuNenu

    Thanks Steve

  • BehnamBehnam

    Perfect Presentation

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

  • James RadfordJames Radford

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

    Thanks

  • Great Job! Definitely worth any minute Smiley 

  • Pedro LuzPedro Luz

    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.

  • HristoHristo

    Are you stupid SylverLight man I am never installing that

  • KevinKevin

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

  • bunggsubunggsu

    amazing,,, glad I could visit your website

  • sgdfsgdf

    dfgsdfg

  • HotCustardHotCustard

    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.

  • tzvitzvi

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

  • PatrickPatrick

    The guy is an absolute genius :)

  • Philippe MonnetPhilippe 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

  • scottyscotty

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

  • geeegeee

    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.

  • JeffWNJeffWN

    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

  • iPhone 4s contractiPhone 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

  • DanielDaniel

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

  • sameday loans no credit checkssameday 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/

  • Dmitry PavlovDmitry Pavlov 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.

     

  • Tore AurstadTore 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.

  • ahmedahmed

    thanks alot http://www.haeaty.com

  • thanks a lot

  • rajashekarrajashekar

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

    Thank you

  • DavideDavide

    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.

  • Noam HonigNoam Honig

    One of the best presentations I have seen.

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

  • AdityaAditya

    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?

  • daslichtdaslicht

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

  • JacobJacob

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

  • SleepyBobosSleepyBobos

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

  • SasiSasi

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

  • artemartem

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

  • ShakeelShakeel

    After watching , my life becomes easy

  • ChrisChris

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

  • Niamath AzeezNiamath Azeez

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

  • dibbzdibbz

    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.

  • Shawn WelchShawn Welch

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

  • Duncan MackenzieDuncanma "yeah that's awful close, but that's not why I'm so hard done by"

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

  • julianjulian

    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?

  • MuraliMurali

    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.

  • himanshuhimanshu

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

Remove this comment

Remove this thread

close

Comment on this Session

Already have a Channel 9 account? Please sign in