title: Working with knockout.js & flipclock.js
body: <p>I am developing a basic time tracking chrome extension and have run into an issue integrating FlipClock.js (a jQuery plugin) with Knockout.</p>
  
  <p>The goal is to have a foreach binding template the relevant HTML and instantiate a FlipClock; up to a total of four FlipClocks. Currently, I'm getting the following error from FlipClock: 'Trying to start timer when countdown already at 0'. My guess is that this is short for "Knockout is destroying your flipclock when the viewmodel updates."</p>
  
  <p>My question is this: Is there a way to prevent the flipclocks from being updated with knockouts viewmodel?</p>
  
  <p>I've pasted in the relevant code below. </p>
  
  <p>JS:</p>
  
  <pre><code>function Timer (name) {
  
      //Declaring Observables, etc.
      var timer = this;
          timer.name = ko.observable(name);
          timer.format = function () {
              return name.replace(/ /g, '');
          };
          timer.key = (timer.format()+ Math.floor((Math.random()*1000000000000)+1));
          timer.clock = $('#' + timer.key + '').FlipClock({countdown: false, autoStart: true, ClockFace: 'HourlyCounter'});
          timer.started = ko.observable(false);
          timer.running = ko.observable(false);
          timer.stopped = ko.observable(false);
          timer.reset = ko.observable(false);
          timer.cleared = ko.observable(false);
          timer.value = timer.clock.getTime();
          timer.start = timer.clock.start();
          timer.stop = timer.clock.stop();
          timer.reset = timer.clock.reset();
  
  //Time Tracker Viewmodel
  function ViewModel () {
      var self = this;
          self.timers = ko.observableArray([]);
  
      //New Timer Method
      self.createTimer = function () {
          var name = $('.projectInput').val(),
              css = name.replace(/ /g, '');
              self.timers.push(new Timer(name));
              $('.projectInput').val("");
      }
  }
  //Applying bindings to view model
  ko.applyBindings (new ViewModel());
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="timers" data-bind="foreach: timers()"&gt;
          &lt;div class="instance"&gt;
              &lt;div class="timerUI"&gt;
                  &lt;div class="title" data-bind="text: name()"&gt;&lt;/div&gt;
                  &lt;div class="controls"&gt;
                      &lt;div class="start button" data-bind="click: clock.start()"&gt;&lt;/div&gt;
                      &lt;div class="stop button" data-bind="click: clock.stop()"&gt;&lt;/div&gt;
                      &lt;div class="reset button" data-bind="click: clock.reset()"&gt;&lt;/div&gt;
                      &lt;div class="clear button" data-bind="click: $parent.clearTimer"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="time" data-bind="attr: {id: key}"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>