title: Creating a custom CSS class binding for Knockout that accepts arrays
body: <p>I'm trying to modify the <code>class</code> binding shown on <a href="https://github.com/SteveSanderson/knockout/wiki/Bindings---class" rel="nofollow">this page</a>:</p>
  
  <pre><code>ko.bindingHandlers['class'] = {
      'update': function(element, valueAccessor) {
          if (element['__ko__previousClassValue__']) {
              ko.utils.toggleDomNodeCssClass(element, element['__ko__previousClassValue__'], false);
          }
          var value = ko.utils.unwrapObservable(valueAccessor());
          ko.utils.toggleDomNodeCssClass(element, value, true);
          element['__ko__previousClassValue__'] = value;
      }
  };
  </code></pre>
  
  <p>So, currently, mine is like this:</p>
  
  <pre><code>ko.bindingHandlers.cssClass = {
      update: function (element, valueAccessor) {
          var cssClass = ko.utils.unwrapObservable(valueAccessor()),
              prevCssClass = element['__ko__previousClassValue__'];
  
          console.log("Previous:", prevCssClass);
          console.log("Current:", cssClass);
  
          if (Object.prototype.toString.call(prevCssClass) === '[object Array]') {
              ko.utils.arrayForEach(prevCssClass, function (classAccessor) {
                  var value = ko.utils.unwrapObservable(classAccessor);
                  ko.utils.toggleDomNodeCssClass(element, value, false);
              });
          } else if (prevCssClass) {
              ko.utils.toggleDomNodeCssClass(element, prevCssClass, false);
          }
  
          if (Object.prototype.toString.call(cssClass) === '[object Array]') {
              ko.utils.arrayForEach(cssClass, function (classAccessor) {
                  var value = ko.utils.unwrapObservable(classAccessor);
                  ko.utils.toggleDomNodeCssClass(element, value, true);
              });
          } else if (cssClass) {
              ko.utils.toggleDomNodeCssClass(element, cssClass, true);
          }
  
          element['__ko__previousClassValue__'] = cssClass;
      }
  };
  </code></pre>
  
  <p>I <a href="http://jsfiddle.net/kamranayub/3ahUA/" rel="nofollow">created a Fiddle</a> which you can play with. My question is, the first time you click 'Change' this works like a charm, but any time after that, the <code>prevCssClass</code> is incorrect <strong>for the <code>multiple</code> observable array</strong> (single works great)... it reflects the <code>cssClass</code> not what actually should be the previous value. Why? I cannot figure out why this is happening, everything seems alright to me.</p>
  
  <p>The bad console output is:</p>
  
  <pre><code>Previous: undefined
  Current: ["blue","small"]
  
  Previous: ["blue"]
  Current: ["blue"]
  
  Previous: ["blue","big"]
  Current: ["blue","big"]
  </code></pre>
  
  <p>The correct output should be:</p>
  
  <pre><code>Previous: undefined
  Current: ["blue","small"]
  
  Previous: ["blue","small"]
  Current: ["blue"]
  
  Previous: ["blue"]
  Current: ["blue","big"]
  </code></pre>
  
  <p>I'm testing in Chrome.</p>
  
  <h2>Update:</h2>
  
  <p>The answer is below. If you're interested, the gist for this new binding is here (all cleaned up):</p>
  
  <p><a href="https://gist.github.com/kamranayub/5224521" rel="nofollow">https://gist.github.com/kamranayub/5224521</a></p>