Knockout: JS library for rich UIs, declarative bindings, and dependency tracking (opens in new tab)

Interesting. The primary motivation as expressed in that link seems to be the separation of concerns to facilitate having a specialist UX designer and a specialist programmer working in a decoupled way.

I've now seen that the MVP pattern is actually very similiar to the MV(VM) pattern.

But i don't really understand the difference. I have, in my applications a basic view that declares all GUI-elements, and special aspects of the GUI, like columns resizable or not in a table. Thats mostly for the designer to build everything out.

Now i write my domain models.

Then i go on and have a concrete view that inherits the formerly created view and sets up databinding, validation, actions etc. handled by the presentation model.

The presentation model is always connected to one specific domain model.

So now i have:

Abstract view (mostly for the designer)

^

|

View -> Presentation model -> Domain Model

Besides the presentation, there are validators etc. but all incorporated with the presentation.

Now i can test against the presentation, the domain or the concrete views.

Also, i can bind multiple presentation models against one view, or one presentation model against multiple views.

But i don't call that MV(VM) but MVP.

I considered both Backbone and Knockout and ended up with Knockout, although both are great! I find Knockout's simple declarative binding to be cleaner for most cases:

  <span data-bind:"text: title"></span>

And Knockout allows you to put bindings in code too, where that makes sense. I also like the way Knockout keeps everything in the view model, rather than passing in the observable attributes when constructing an instance. For instance:

  var Sidebar = Backbone.Model.extend({
    promptColor: function() {
      var cssColor = prompt("Please enter a CSS color:");
      this.set({color: cssColor});
    }
  });

Here color doesn't exist yet. I guess this is just standard javascript style? In Knockout (+coffeescript), I'd write:

  class SideBar
    color: ko.observable('white')
    promptColor: ->
       @color(prompt('Please enter CSS color:'))

My model is self-contained. This example also shows the syntax for updating and getting values. I prefer Knockout's

  @color(cssColor)

to Backbone's

@set({color: cssColor})

although this is minor and perhaps you want to allow for bulk updates.

I can't help but feel that these types of libraries are the future. I hope there is lots of cross-pollination going on. Sproutcore focuses on the 5 percent of webapps that should be desktop style. Both Knockout and Backbone give lots of the same benefits, but allow a more flexible application style.

My only wish is for a language agnostic persistence protocol, with some socket.io and REST protocols implemented for most frameworks/languages. Ideally, I could use this protocol to sync with my iPhone/Android/HTML5 app, without changing the server side. This could get very hairy (FeedSync/LiveMesh/Wave), but something simple that accomplishes 90% would be a great.

The evaling is a robust way to parse the JSON-like binding syntax at the full speed of the browser's native code. Much faster than implementing the parsing in JavaScript.

I'm only 4 hours into knockout.js but this seems to be the key benefit.

I've been massacring functions that manipulate multiple elements and instead am directly tying the behaviors to the underlying data. My future self is very pleased with me.

I didn't go throughout the frameworks, but I imagine this scenario:

Backbone is the main platform. You'll use it for pretty much everything except one thing "templating". Knockout will fit well with templating. The example that is present in the home page is what I think of. This will help separate the two processes. I'll have two different files reducing the complexity of each one. jQuery is the rescue when dealing with other DOM issues, animation and also AJAX.

Could you give an example how KnockoutJS and CoffeeScript fit together? Or is there a blog post somewhere that explains the details for using this combo?