Develop Reference

How to create knockout data bindings at runtime w/o data attributes

Is it possible to create knockout bindings from javascript alone, i.e. without writing custom html attributes?
I'm very much stuck with our existing markup and can't add data-bind etc. that knockout.js relies on (html is generated programmatically and there is no access to the rendering pipeline, please assume I've exhausted my options in trying :)
One idea that I'm tentatively pursuing is adding data-bind attributes at runtime prior to calling ko.applyBindings. Is there a preferred approach? I'll also accept an alternative, sufficiently documented/popular/stable framework if it also implements bindings similar to knockout.js if/visible.

Knockout 3.0 (which just around the corner and is in release candidate now) opens up a lot more ways to interact with the binding process, such as the ability to preprocess nodes and dynamically generate bindings. Take a look at Knockout.Punches to see some examples of what is possible. Between that and the things already mentioned like the unobtrusive and class binding providers, you should have no trouble working with whatever markup you're stuck with.
It may also be worth pointing out knockout has an applyBindingsToNode function which takes in a JSON object of the bindings if you want full control, though that does not apply bindings to descendant elements.

Knockout allow us to create custom binding provider, I find out there is several libs that help you to do it
You can find them here:
One that don't use DOM at all:
https://github.com/tobio/knockout.unobtrusivebindingprovider
One that use another approach :
https://github.com/rniemeyer/knockout-classBindingProvider
At last resort if none of them suit your needs, you can with jQuery modify the DOM then call the binding on it...

Look at the "Unobtrusive event handling" section in the Knockout documentation under "Further techniques".

Knockout extender or binding?

I'm new to Knockout and am looking to format the output of computed fields. Specifically, currency and percentages. I've seen some examples using custom binding as well as extenders. I gather that extenders are the newer concept of the two. Does that mean extenders are the RIGHT choice for my needs? I can't find any definitive answers on this.
I also can't find any resources that have any standard formatting binding/extenders already built. Do I really have to reinvent the wheel on this? Seems very odd that nothing is already out there... Or is there a better approach to formatting KO computed?

In my opinion, you can use either a custom binding or an extension/extender to do formatting. It comes down to whether you want the logic to be enforced at the view model level or in the view itself as a binding.
Putting it in the view model ensures that values changed via the UI or programmatically will all hit the formatting logic. So, it is reliable, but can complicate the view model (especially if it is created by something like the mapping plugin).
Putting it in a binding, simplifies the view model, while being effective for most use cases (where programmatic changes to a value are not a concern).
This is an older answer, but demonstrates both: Formatting rules for numbers in KnockoutJS.

Most useful techniques for two way data binding with js

With abundance of web services and client side templating features of jQuery and likes, creating mashups or sites consuming a multitude of web services and posting data back to these services is becoming exceedingly popular. For a page of decent size with this kind of architecture, say a dashboard. What are the useful techniques of maintaining this client side state. In other words whats are some of the ways to do two way databinding?
Sample scenario:
Get Data From Service as JSON/XML
Display/Bind on UI
Capture User Input
Recreate request from the UI controls/html
Post Data To Service
Get Response and Rebind

In jQuery you can easily do AJAX request of page load that calls the service, returns an object, and bind that object to the form using jQuery Templates plugin. When the form needs to be submitted, you can use jQuery Form plugin to send to the service via AJAX and return the JSON object, bind it to the jQuery Templates plugin container (the form).
jQuery AJAX API
http://api.jquery.com/jQuery.ajax/
jQuery Templates Plugin
http://plugins.jquery.com/project/jquerytemplate
http://api.jquery.com/category/plugins/templates/
jQuery Form Plugin
http://jquery.malsup.com/form/
also, You may combine the use of jQuery "Form" plugin to send the form, and the KnockOut JavaScript library, which is all about the kind of binding you want to do.
See knockout JS library details on http://knockoutjs.com/
The first two features as listed there are:
Declerative Bindings
Automatic UI Refresh
See this live example for very small introduction http://knockoutjs.com/examples/helloWorld.html
Update:
Since this answer got a recent upvote, it's also important to mention the relatively-new kid in the town, angularJS, it's a bit of a bigger framework that can do so many things, but doing two-way data-binding is the easiest thing ever.
Official URL: http://angularjs.org
Example: http://docs.angularjs.org/guide/forms
http://gurustop.net

Angular is the most impressive player I've seen for two-way databinding. You can use plain old JavaScript objects, attach them to an Angular scope object, and then bind the scope to a section of the DOM. Here's an example for Angular 0.9. (Angular 1.0 uses a very different API to achieve the same thing.)
// angular.compile() returns a databinding function
var databind = angular.compile(document.documentElement);
var model = angular.scope();
// add data to the scope object
model.greeting = "Hello, World!";
model.colors = ["red", "green", "blue"];
// hook 'em up
databind(model);
You can use angular expressions in the HTML for databinding, including form controls.
<!DOCTYPE html>
<input name="greeting" />
<span ng:repeat="color in colors" style="color: {{color}}">
{{color}}
</span>
In this case, the greeting property of the scope objects gets updated with every keystroke in the textbox.
Or if you don't want to use databinding expressions in your HTML, you can do everything manually.
model.$watch("greeting", function (value) {
// when the greeting changes, update the DOM
$("input[name=greeting]").val(value);
});
Then every time you update the scope object and call $eval(), if anything has changed, listeners will be notified.
model.greeting = "Hi.";
model.$eval();
And the best part is that you can make changes to anything attached to the scope, call its $eval() method, and the HTML automatically updates.
model.colors.append("yellow");
model.colors.sort();
model.$eval(); // notifies listeners, including bound HTML
Knockout JS is inferior because instead of working with plain JavaScript objects, arrays, strings, and numbers, you must create instances of its Observable and ObservableArray classes to do databinding.
Enjoy!

I would take a look at Lava JS (http://lava.codeplex.com). It has very nice databinding and it is very unobtrusive to use. It also supports fetching/posting data to the server.

Is there an equivalent to Spring:bind for binding forms and data on the front end?

I asked this question a few weeks ago and didn't get the answer I was looking for, so figured I'd ask again a little differently.
I need to construct a form in my UI which will allow users to view and edit complex, nested objects. If I were doing this the JSP way, I would use Spring's bind functionality to associate form fields with backing objects. Each field would be tagged with an "address" indicating which field in the back object it's associated. Is there an equivalent front-end technology which will allow me to associate form fields with nested objects? I'm imagining a syntax that would look something like this:
<input class="boundInput boundTo:mailingAddresses[0].street" type="text" value=""/>
And an acommpanying javascript function which would examine all of the "boundInput" fields on the page and attach listeners which would update a backing js object intelligently based on the boundTo: class.
Does anything like this exist? Does anyone agree that it would be nice to have?
Here's the question I asked before:
Best way to link UI elements with backing javascript objects

I don't know about a library, but there's always this, assuming you're dealing with a global:
<input onchange="mailingAddresses[0].street=this.value" type="text" value=""/>
If not a global, there's DOM ways around that

As per my knowledge there is no such plugin or similar available. I think if I can give you a brief idea about how this binding works, you may see things in a different view and you may need to redesign your application accordingly.
Spring has special tag libraries to work with this form bindings. So when designing the forms in your jsp, you have to use these taglibs to code your form.
When you add an object with a specific key in the modal and then use the same key in your form tag as modalAttribute, spring looks up the object with the key and then for every attribute you access inside that form, it will use it to lookup and set the value to the control. Seriously there is very little magic in here.
When you are posting data to the form, spring does a little magic by looking at the RequestParam Annotation and then tries to bind all possible attributes to that object based on OGNL paths.
So what you are asking may not be available is my guess. I am working in spring and MVC for more than 4 years and never needed such a thing. If you can elaborate your problem I can help you more...

Best way to link UI elements with backing javascript objects

This is a rephrase of a post I made last week. I was surprised I didn't get more of a response, thinking maybe I didn't describe/title it very well.
Simplest possible way to describe it:
Is there something like spring:bind for javascript/dhtml?
The high level view of what I want:
In my app, I have a list of "subscriber" objects which I've loaded via ajax. I'd like to dynamically draw UI elements representing these objects, and register event handlers so that the backing objects are updated when the user edits the view.
The more low level thoughts
Dynamically displaying js data in the browser is trivial. It's also not a big problem to write event handlers for every type of data, but it's a bit tedious. I feel like there should be some library out there which will behave as a template system, creating HTML form elements dynamically, populating placeholders with data from my js objects, but go to the additional step of updating the backing objects when the user makes edits to the form elements. The closest example I'm aware of is a back-end technology, the Spring (java framework) binding functionality, where form elements in templates are coded according to a system where they're automatically linked to the model objects on the server.
So, does what I've described exist in the front-end world?

I do not know about libraries of the kind you described, but jQuery offers the very useful data() function which allows you to associate an arbitrary piece of data with a DOM element, using a key. Adding a new element and associating data with it might look like this:
var elem = $('<div class="subscriber">...</div>').appendTo(someContainer);
elem.data('yourKey', backingObject);
Using event delegation (e.g., the live() function), you can add one event handler that is valid for all graphical representations of your subscriber objects, no matter if they already exist or not.
$('.subscriber').live('click', function(e) {
var backingObject = $(this).data('yourKey');
// Now call some methods on the backing object
});
Hope this helps you somehow.

This is not an answer, but a larger comment. It might help to write the API you want to use, such as:
var jsObj = {};
jsObj.bind(document.getElementById("firstName"), "onchange");
//binds the data from the firstName element to the jsObject in property "firstName" during the onchange event.
Is this what you are trying to do?
A quick google search turns up:
http://api.jquery.com/bind/
It might be interesting to make a delegate to jQuery's bind, which doesn't see to hard to do.

Knockout looks like it does the job you are looking for.