javascript - Knockout.js で属性の namespaceURI を設定するにはどうすればよいですか?

Question

svg で、ノックアウトを使用xlink:hrefしてノードの属性を設定するaと、属性の名前空間が正しく設定されないため、aクリックしたときにリンクとして機能しません。

たとえば、リンクされた 2 つの楕円を含む次の svg を考えてみましょう。1 つはハードコーディングされた属性を持ち、もう 1 つはxlink:href属性を介してノックアウトによって設定されdata-bindます。

<svg width="5cm" height="6cm" viewBox="0 0 5 6" version="1.1" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <rect x=".01" y=".01" width="4.98" height="5.98"  
        fill="none" stroke="blue"  stroke-width=".03"/> 
  <a xlink:href="#hardcoded"> 
    <ellipse data-bind="attr: blue" /> 
  </a> 
  <a data-bind="attr: { 'xlink:href': href }"> 
    <ellipse data-bind="attr: red" /> 
  </a> 
</svg>

ノックアウトを実行するのはとても簡単です:

ko.applyBindings( { 
  blue: { cx:2.5, cy:1.5, rx:2, ry:1, fill:"blue" },
  href: '#foo', 
  red: { cx:2.5, cy:4.5, rx:2, ry:1, fill:"red" },
});

ただし、ハードコードされたリンクのみが機能します。namespaceURI属性ノードの値を表示するコードを追加するとxlink:href、ノックアウトによって設定された属性nullには、ハードコードされたものとは対照的に、namespaceURIがあることがわかりますhttp://www.w3.org/1999/xlink。

Array.forEach( document.getElementsByTagName('a'), function(a){
  a.setAttribute('title', 'xlink:href namespaceURI = ' + a.getAttributeNode('xlink:href').namespaceURI);
});

これらすべてを fiddle で表示できます。

属性の正しい名前空間をノックアウトに伝える簡単な方法はありますか?それとも、カスタム バインディングを記述する必要がありますか?