javascript - Aurelia での名前空間属性へのバインディング

Question

属性（一方向）にバインドする場合、バインドできるオプションがいくつかありますattr-name.bind="variable"（一方向と一度だけ試行しました）または補間を使用しattr-name="${variable}"ます。ただし、xlink などの名前空間要素にバインドしようとする場合:href 現在取得している:

Uncaught NamespaceError: 'Element' で 'setAttributeNS' を実行できませんでした: '' は属性の無効な名前空間です。

コントローラーの page.js に次のように記述します。

export class page {
    constructor(){
        this.icon = 'blah';
    }
}

page.html の次の内容:

<template>
  <svg class="icon ${icon}">
    <use xlink:href="${icon}"></use>
  </svg>
</template>

私が言ったように、上記のバインドのいずれかが指定されたエラーをスローしています。

この名前空間属性にバインドする方法について何か考えはありますか?

完全なスタック トレースを出力するようにブートストラップの handleApp 関数をインストルメント化しました。

Error: Failed to execute 'setAttributeNS' on 'Element': '' is an invalid namespace for attributes. at Error (native) at OoPropertyObserver.setValue (http://localhost:9000/jspm_packages/github/aurelia/binding@0.3.3/system/property-observation.js:200:26) at InterpolationBinding.setValue (http://localhost:9000/jspm_packages/github/aurelia/templating-binding@0.8.4/system/binding-language.js:214:35) at InterpolationBinding.bind (http://localhost:9000/jspm_packages/github/aurelia/templating-binding@0.8.4/system/binding-language.js:202:22) at View.bind (http://localhost:9000/jspm_packages/github/aurelia/templating@0.8.9/system/view.js:65:29) at ViewFactory.create (http://localhost:9000/jspm_packages/github/aurelia/templating@0.8.9/system/view-factory.js:173:22) at BoundViewFactory.create (http://localhost:9000/jspm_packages/github/aurelia/templating@0.8.9/system/view-factory.js:128:39) at Repeat.processItems (http://localhost:9000/jspm_packages/github/aurelia/templating-resources@0.8.6/system/repeat.js:105:36) at Repeat.bind (http://localhost:9000/jspm_packages/github/aurelia/templating-resources@0.8.6/system/repeat.js:60:22) at BehaviorInstance.bind (http://localhost:9000/jspm_packages/github/aurelia/templating@0.8.9/system/behavior-instance.js:67:39)

また、プロパティ監視コードをハックして名前空間を明示的に設定すると機能しますが、これは非常に厄介で、すぐに壊れる可能性があります。

https://github.com/aurelia/binding/blob/master/src/property-observation.js#L153-L159が次のように変更されました:

setValue(newValue) {
    if (this.isSVG) {
      if(this.propertyName.indexOf('xlink:') >= 0){
        this.obj.setAttributeNS("http://www.w3.org/1999/xlink", this.propertyName, newValue);
      } else {
        this.obj.setAttributeNS(null, this.propertyName, newValue);
      }
    } else {
      this.obj[this.propertyName] = newValue;
    }
}