title: Bind knockout property to length of svg text element
body: <p>I want to bind a knockout property to the length of an svg text element so that it is set every time the text is changed. I've started with something like this:</p>
  
  <pre><code>ko.bindingHandlers.length = {
      init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
          var width = element.getComputedTextLength();
          valueAccessor()(width);
          element.onchange = function() {
              var newWidth = element.getComputedTextLength();
              valueAccessor()(newWidth);
          };
      }
  };
  </code></pre>
  
  <p>and the svg element    </p>
  
  <pre><code>&lt;text data-bind="text: text, length: labelLength" x="0" y="0" fill="black"&gt;Hello World&lt;/text&gt; 
  </code></pre>
  
  <p>jsfiddle is here <a href="http://jsfiddle.net/9vWhD/" rel="nofollow">http://jsfiddle.net/9vWhD/</a></p>
  
  <p>Any idea of the best approach?</p>