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

【问题标题】：Binding to a Namespaced Attribute in Aurelia绑定到 Aurelia 中的命名空间属性
【发布时间】：2015-03-05 02:14:14
【问题描述】：

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

未捕获的命名空间错误：无法执行“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>

正如我所说的，上面的任何一个绑定都抛出了给定的错误。

关于如何绑定到这个命名空间属性有什么想法吗？

检测引导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;
    }
}

【问题讨论】：

标签： javascript aurelia

【解决方案1】：

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

【讨论】：