I am falling (hard) in love with KnockoutJS. I am going to start posting little tidbits here.

I am currently working on a search feature that retrieves the search results via an AJAX request. When the user submits the search form, I am providing visual feedback in the form if a "spinner". Additionally, I decided that I would like to disable the form until the AJAX request is complete.

This is very easy to accomplish using a custom binding with Knockout.

Custom Binding

ko.bindingHandlers.disableForm = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var disabled = ko.utils.unwrapObservable(valueAccessor());
        $(element).find(":input").each(function () {
            var el = $(this);
            if (disabled) {
                el.data("__disabled", el.prop("disabled"));
                el.prop("disabled", true);
            } else {
                el.prop("disabled", el.data("__disabled"));
            }
        })
    }
}

View Model

var searchModel = function() {
  this.results = ko.observableArray();
  this.searching = ko.observable(false);

  this.search = function(form, event) {
    this.searching(true);
    var $form = $(form);
    $.ajax({
      url : $form.attr("action"),
      type: $form.attr("method"),
      data: $form.serialize(),
      dataType: "json"
    }).done(function(json) {
      this.results(json);
    }).always(function(json) {
      this.searching(false);
    });
  }
}

View

<form data-bind="disableForm: searching, submit: search" action="/search" method="get">
  User Email: <input type="text" name="email"><br>
  User Phone: <input type="text" name="phone"><br>
  <button type="submit">Search</button>
</form>

<div data-bind="visible: searching">
  <img src="//nontalk.s3.amazonaws.com/ajax-loader.gif"> Searching...
</div>

<ul data-bind="foreach: results">
  <li data-bind="text: name"></li>
</ul>