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

Question

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

Uncaught NamespaceError: Failed to execute 'setAttributeNS' on 'Element': '' is an invalid namespace for attributes.

对于在控制器中具有以下内容 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 中的命名空间属性

Binding to a Namespaced Attribute in Aurelia

javascript

aurelia