title: How can I apply bindings on a DOM element that will be moved before it is evaluated with KnockoutJS?
body: <p>I created a custom binding that moves a DOM node to before the current DOM node. The moved DOM node has a text binding on it. To be clear, this looks something like the following simplified example [<a href="http://jsfiddle.net/8SeBK/" rel="nofollow noreferrer">jsfiddle</a>]:</p>
  <h3>HTML</h3>
  <pre><code>&lt;div data-bind=&quot;myBinding: myObservable&quot;&gt;
     &lt;div data-bind=&quot;text: myOtherObservable&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <h3>KnockoutJS Binding</h3>
  <pre><code>ko.bindingHandlers.myBinding = {
      init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
          var $element = $(element),
              $childElement = $element.find('div');
          
          //Move the inner div to before the current div, and it won't get evaluated.
          $(element).before($childElement);
      }
  };
  </code></pre>
  <h3>KnockoutJS ViewModel</h3>
  <pre><code>function ViewModel() {
      this.myObservable = ko.observable(false);
      this.myOtherObservable = ko.observable(&quot;Test&quot;);
  }
  
  ko.applyBindings(new ViewModel());
  </code></pre>
  <h1>The Problem</h1>
  <p>The text binding doesn't get applied on the inner child node. I assume this is because the DOM tree is walked from top to bottom. When the child node gets moved before the current node, it is now prior to the current node, and will be skipped when the DOM is traversed forward.</p>
  <p>My actual binding needs to move the div before the current div. However, I need the bindings to be applied.</p>
  <h1>Question</h1>
  <p>Is it possible to manually apply the binding on the child DOM node before I move it within my binding handler? If so, how can it be done?</p>