4

当绑定到属性（单向）时，有几个选项可以绑定attr-name.bind="variable"（也尝试过单向和一次性）或使用插值attr-name="${variable}"，但如果您尝试绑定到命名空间元素，例如 xlink :href 你目前得到：

未捕获的命名空间错误：无法在“元素”上执行“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;
    }
}
4

1 回答 1

3

感谢https://github.com/aurelia/binding/issues/34 ，现在明确支持处理 aurelia 中的命名空间元素。不需要做任何特别的事情。这适用于命名空间的 HTML 和 HTML5 问题。

于 2015-03-04T18:14:14.207 回答