javascript - 绑定(bind)到Aurelia中的命名空间属性

当绑定(bind)到属性(单向)时，有两个选项可以与attr-name.bind="variable"绑定(bind)(也可以单向尝试一次)，也可以使用插值attr-name="${variable}"绑定(bind)，但是，如果您尝试绑定(bind)到命名空间元素，例如作为xlink:href您当前获得:



对于在 Controller page.js中具有以下内容:

export class page {
    constructor(){
        this.icon = 'blah';
    }
}

以及page.html中的以下内容:

<template>
  <svg class="icon ${icon}">
    <use xlink:href="${icon}"></use>
  </svg>
</template>

正如我所说的，以上任何一个绑定(bind)都将抛出给定的错误。

关于如何绑定(bind)到此命名空间属性的任何想法？

引入了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;
    }
}

最佳答案

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

关于javascript - 绑定(bind)到Aurelia中的命名空间属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28520453/