Can you set existing Knockout bindings within a custom binding?

Question

I currently have all my labels looking something like this:

<label data-bind="css: { notdone: FirstName.isModified() && !FirstName.isValid(),
       done: FirstName.isModified() && FirstName.isValid() }">FirstName</label>

I would like to create a custom binding to extract out that duplication across the labels without reimplementing the CSS binding.

Is it possible for me to use the CSS binding within my custom binding?

If not then i will be reinventing the wheel in order to get rid of some duplication like so:

ko.bindingHandlers.validationLabel =
{
  update: (element, valueAccessor) =>
  {
      var value = valueAccessor();
      var isModified = value.isModified();
      var isValid = value.isValid();

      $(element).removeClass("done notdone");

      if (!isModified)
          return;

      $(element).addClass(isValid ? "done" : "notdone");
  }
}

Answer 1

You can call the built in bindings from within your own. Something like this should work in your update method to replace your jQuery code:

ko.bindingHandlers.css.update(element, function() {
    return { done: isValid, notdone: !isValid }
});

Related question with more details: Can I create a custom binding that uses other bindings in knockout.js