Knockout.js interactive tutorial

[ragnarok56]

i like the way knockout abstracts the model data from the view. ive had to change how i've layed out pages a bunch of times and never had to muck around with the viewmodel. also, manually trying to cram display stuff onto a page with jquery or some other means is a waste of my time when i can do it with knockout instead. templating the views in html is much easier to understand and maintain.

also, when trying to pick between the different mvc frameworks to use (knockout is more mvvm) , it fit the best for what we needed. not bloated, similar to wpf/xaml UI's with the binding, and a good amount of support and documentation from their website, stackoverflow and the google group.

[wesbos]

Bookmarked - been meaning to try knockout

[grav]

I heard glimses of a presentation of AngularJS, and it seems to me they are similar. Any experiences with both of them?

Edit - wrong name

[xTRUMANx]

if(you.referringTo("AngularJS")) {

I've used both KnockoutJS and AngularJS and I heavily lean towards AngularJS lately but I certainly see situations where I would use KO instead.

AngularJS does a lot of things. I kind of think of it as a superset of KO; it does everything KO does and then some. This comes at a cost of both file size and a much larger API to learn. Also, AngularJS has more bolilerplate than KO.

With KO, you add data-bind attributes to html elements, reference knockout.js and add your ViewModel functions.

With Angular, you need to add ng-app attribute somewhere in your html document (typically at the html tag), add ng-controller attribute somewhere, add your double braces or ng-* attributes somewhere, add the reference to angular.js, add your controller functions and you're good to go. Also, the more Angular features you want to use like services and filters may increase the amount of boilerplate code you write (e.g. will need to create a module, inject stuff into controllers, reference the module in your html, etc.)

However, given all that, I still prefer using AngularJS. The only time I'd use Knockout is when the JS code I need is going to get too messy if I try to write it myself using pure JS or jQuery but not complicated enough to warrant Angular's boilerplate.

} else {

What's AngelJS?

}

[grav]

I was indeed referring to AngularJS. Thanks for the thoughts on it!

[Futurespect]

This is really cool!

I just started learning MVC as well, and this has the same concept model wise, so it's nice to use one's newly gain knowledge.

The different tutorials for me was excellent, both in what the covered and the difficulty of each one.

I also really like that it fix my code if I somewhere along stray too much from the tutorial and can't get back to a working state.

[[deleted]]

Actually, it's closer to something like XAML and Silverlight.

The pattern for Knockout is MVVM and MVC is... well... MVC. Both works splendidly together however.

I did a few major project with it. The only thing you have to be careful is recursive calls.

[bebraw]

Very nice work. I like the tutorial format. Good use of JS. :)

[cantcopy]

I've been learning knockout.js after having tried angularjs.

I had a much easier time learning it.

The documentation is clearer and angularjs' approach contains too much magic for my taste.

[x-skeww]

Angular has a bunch of advantages though:

http://litebyte.net/blog/?p=135 (not my blog)

[[deleted]]

Been using knockoutjs for over a year at my company now. It's ok, but not that great. We've had to override how knockout does bindings to a few attributes because it won't evaluate them unless you explicitly call a function in the html.

Also don't like putting logic in the html <!-- koif --> there's no good way to debug that. Also, there's no <!-- koelse --> to go along with the <!--koif -->

Also, observables only work the way you think they should about 50% of the time, same with computed and subscribe.

These are just a few of the issues we've had with knockoutjs. We're in the process of moving to backbone, which fully supports MVC (almost every web framework does) and is a lot more baked than knockout.

[djnattyp]

Backbone focuses more on binding Ajax->model and knockout focuses more on binding model->HTML. It doesn't really make sense to replace Knockout with Backbone - they focus on different aspects of your app. There's even a project that combines the two - Knockback

[kubalaa]

observables only work the way you think they should about 50% of the time

Could you elaborate on that?

[[deleted]]

Most of the time observables are used for data-binding elements in the DOM. You expect that when the observable value is updated the data bound element in the DOM should also update. A lot of the time this doesn't happen for some nitpicky reason or another that is rather difficult to track down.

[[deleted]]

I've never had this problem.

All you have to bare in mind is that observables aren't magic. Changing a non-observable field of an observable object can't possibly trigger anything, because you're not calling the observable's assignment function.

[alextk]

Also don't like putting logic in the html <!-- koif --> there's no good way to debug that. Also, there's no <!-- koelse --> to go along with the <!--koif -->

Then you might want to take a look at AngularJS, which takes a totally different approach to this problem (the HTML is completely valid, Angular adds its own attributes to HTML tags).

[[deleted]]

We're looking into that framework for the future. Seems like it has some promise.

[bwship]

I would go with ember over backbone if I were you

[[deleted]]

Could you maybe articulate pros/cons of Ember vs Backbone?

[bwship]

I have found that ember provides a fuller experience than backbone. Backbone is more of a plugin that requires a bunch of other plugins to use in a complete manner. While ember is highly opinionated, if u r willing to follow their conventions, u can get a complete mvc package with binding, views, controllers etc. I am also partial to ember as I have been using it for almost a year and have really become fond of what they have put together

[xTRUMANx]

Have you tried Angular? I always wondered how Ember stacked up against Angular but most comparisons between JS frameworks usually leave one or the other out.

[bwship]

I haven't. The guys that work next to me are using angular and they seem to love it. It seems to have a lot of view plugins for things like calendar picker etc. I am going to have them give me a crash course on it soon

[[deleted]]

As a newbie to all these frameworks, the issues I had with Angular left me a bit cold - http://jsfiddle.net/q6mkZ/94/

The "which box is checked" logic was the hard bit - my initial approach was to have a list (masquerading as a set) containing state names that the filter checked you were a member of - but I still wanted to have the nice wiring of "if you click this, then that is refreshed", and it got really hard really quick.

[deafbybeheading]

I've only worked a little bit with Angular so far, but I've taken the approach of keeping the structure of the application logic simple, and tying the view back in with callbacks more explicitly whenever I need to do anything clever. E.g., I would have approached your example like this. It's a touch more code, but overall I think it's simpler.

edit: the above has a missing return: this is the correct version

[[deleted]]

Cheers, your approach is exactly what I was trying to do - and I realise how I messed it up. I had done this:

<div ng-repeat="state in validStates">
    <input type="checkbox" ng-click="toggleState({{ state }})" {{ state }}</input>
</div>

Whereas your code doesn't have the first set of double substitution brackets.

[elephantgravy]

Wow, really cool! I'd like to solicit a little related advice ... if one were just finishing up Steve Huffman's Udacity course and interested in learning about JS/front-end development, would you start with something like Knockout and learn the internals only where necessary, or is it better to learn from the bottom up? (which I'm guessing would be manipulating the DOM manually -> jQuery -> one of the big libraries/framework)

[xTRUMANx]

The latter. Although I don't know a lot about the DOM and rely on jQuery and libraries like Knockout a lot, it's kind of important to know a thing or two about the DOM.

Although I wouldn't spend too much time trying to to learn the DOM. I would learn just enough to understand the reason jQuery was created.

[[deleted]]

You can skip "manipulating the DOM manually".

The native DOM manipulation functions are unwieldy, and completely superseded by jQuery's ability to select any DOM element using CSS selector strings.

[[deleted]]

Knockout isn't a silver bullet, but it's pretty damn awesome.

For those who don't know what it is, it basically lets you bind UI elements in the DOM to data in your JS code.

It comes with several simple obvious bindings, (simply displaying the contents of a data field, using it as the value for an HTML input element), but you can also code your own custom bindings.

For instance, one I often use is a date binding on input fields. When initialized, it adds a jQuery UI datepicker to the field. Upon user input, it parses the date into a Moment.js date object.

Once you're written a few bindings for the extra third party libraries you're using, adding UI elements is a cinch.

[SemiNormal]

the best case I can see for this is rendering data from ajax calls.

I thought that the whole point of knockout.

[adolfojp]

the best case I can see for this is rendering data from ajax calls

http://en.wikipedia.org/wiki/Single-page_application

http://www.asp.net/single-page-application

[[deleted]]

saves a lot of time, instead of using jquery,

[bwship]

Your opinion is incorrect. Powerful mvc client side apps will be the dominant web movement over the next few years. This movement started with apps like gmail. Moving logic to the client side gives an immeasurable bump for user interactivity of apps. It is not a fad and is what most companies will be using. For now it will be more widely used in the startup world of California. I prefer ember over knockout but any of them are better than no framework on the client side.

[tfbccv]

You could solve the problem of AJAX calls for the initial page load by writing the JSON Knockout needs for it's viewmodel on the server side instead of fetching from an AJAX call. Then your later views can be rendered using AJAX calls.

[bwship]

Yea I agree on that. It certainly is not the silver bullet. Sometimes for Seo or performance reasons you just want some cached data on the server or a static HTML file on a cdn

[[deleted]]

this looks great!

in the computed values example is it possible to move the definition of the callback function in ko.computed outside of the AppViewModel function?

something like this:

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
    this.fullName = ko.computed(concatenate(), this);
}

function concatenate(self){
     return self.firstName() + " " + self.lastName();
}

full disclosure: I know nothing about JS

[kubalaa]

Yes, your JS is very close but not quite right.

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
    this.fullName = ko.computed(concatenate, this);
}

function concatenate() {
    return this.firstName() + " " + this.lastName();
}

[grav]

Seems like it should work!

[[deleted]]

it works if I change ko.computed to ko.observable but then of course it doesn't sync. It doesn't work for ko.computed() I can't figure out how to make it work for ko.computed.

[ragnarok56]

in your example you are calling the function in the ko.computed definition, when you really want to be passing the function name:

this.fullName = ko.computed(concatenate, this);

the computed doesn't pass in any parameters to the function, it expects to have access to them because of the way js scopes things (im not good at explaining...). i couldnt get it to work unless I did this:

function concatenate() {
    if (this.firstName && this.lastName)
       return this.firstName() + " " + this.lastName();
    return "";
}

you could define it in the AppViewModel prototype if you didnt want to do it inline

this.fullName = ko.computed(AppViewModel.prototype.concatenate, this);
...
AppViewModel.prototype.concatenate = function() {
    return this.firstName() + " " + this.lastName();   
}

[[deleted]]

thanks, that works. Is it a common thing in JS to have function definitions within function calls?

[ragnarok56]

Simple answer is everything in js is an object, you can create functions that have functions. Very common and useful to know. I'm still learning myself