綁定到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>

正如我所說，上面的任何一個綁定都會拋出給定的錯誤。

有關如何綁定到此命名空間屬性的任何想法？

檢測bootstrap 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;
    }
}

Answer 1

現在，通過https://github.com/aurelia/binding/issues/34明確支持處理aurelia中的命名空間元素。 無需做任何特別的事情。 這適用於使用命名空間的HTML和HTML5問題。