The "asyncCommand" binding

All asynchronous actions in ActivityFeed are implemented using ko.asyncCommand. AsyncCommand is used insead of click binding for functions that return Deferred object as result. It supports enable, allowed and inProgress properties.

IsAllowed property is used to check if current user permissions are sufficent to run command. IsInProgress property is used to check if command is currently running. IsEnable property is used to check if command can be run. IsEnable checks if isAllowed is true, isInProgress is false and if enable function passed to asyncCommand constructor is true or not assigned.

this.removeUpdate = ko.asyncCommand(
  function () {
      return removeUpdateHandler(self);
  }, 
  self.isEditable,
  self.isAllowed
);
When command is in-progress state, then binded element have disabled class assiged. For buttons and links also disabled attribute is set.

The "commandConfirm" binding

CommandConfirm binding allows you to set command confirmation. Value passed to the binding is function that returns booblean value or Deferred object that have resolve function with boolean parameter.

CommandConfirm as boolean function

When boolean function is passed to ConfirmCommand binding, then built-in javascript confirm is used.
<li><a href="javascript:void(0);" data-bind="command: removeUpdate, commandConfirm: function () { return confirm('Remove update?'); }">Delete</a></li>

CommandConfirm as Deferred object

When function with Deferred result is passed to CommandConfirm, then command is started when resolve function of Deffered object is called. Then function required deferredResult parameter. To start command deferredResult must be true.

<li><a href="#" title="placeholder" data-bind="command: removeComment, commandConfirm: confirmRemoveComment">Delete</a></li>

function confirmRemoveComment(comment) {
  var defer = $.Deferred();

  $("#dialog-confirm #confirmQuestion").text("Comment: '" + comment.text() + "' is going to be removed. Are you sure?");

  $("#dialog-confirm").dialog({
    autoOpen: false,
    close: function () {
      $(this).dialog('destroy');
    },
    resizable: false,
    height: 200,
    width: 450,
    modal: true,
    buttons: {
      "Ok": function () {
        $(this).dialog("close");
        defer.resolve(true);
      },
      Cancel: function () {
        $(this).dialog("close");
        defer.resolve(false);
      }
    }
  });

  $("#dialog-confirm").dialog("open");

  return defer.promise();
}

Last edited Jul 16, 2012 at 7:26 AM by grzwie, version 10

Comments

No comments yet.