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

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

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.

Hmmm... I think Sys.Observer was ( ) 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?

5 hours ago, Ryoushin wrote

Hmmm... I think Sys.Observer was ( ) 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.

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.

www.Edevlete.NET 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)

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 http://learn.knockoutjs.com/.

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 http://blog.monnet-usa.com/?p=354

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 HELP

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

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

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

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 http://www.haeaty.com

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!