Question

绑定到属性（单向）时，有两个选项可以与attr-name.bind="variable"绑定（也尝试单向和一次）或使用插值attr-name="${variable}"，无论哪种方式但是，如果您尝试绑定到名称空间元素（如xlink：href），则当前获得：

Uncaught NamespaceError：无法执行'setAttributeNS' 'Element'：''是属性的无效命名空间。

在控制器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问题。

绑定到Aurelia中的命名空间属性

1 个答案: