При привязке к атрибутам (в одну сторону) есть несколько вариантов, которые вы можете связать с помощью attr-name.bind="variable" (также пробовали одноразовые и одноразовые) или с использованием интерполяции attr-name="${variable}", в любом случае если вы пытаетесь связать с элементом пространства имен, таких как XLink: HREF вы сейчас получаете:Привязка к атрибуту имен в Aurelia
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>
Как я уже сказал, одно из указанных выше связующих данных бросает данную ошибку.
Любые мысли о том, как привязываться к этому атрибуту имен?
Instrumented функции самозагрузки 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/[email protected]/system/property-observation.js:200:26) at InterpolationBinding.setValue (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/system/binding-language.js:214:35) at InterpolationBinding.bind (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/system/binding-language.js:202:22) at View.bind (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/system/view.js:65:29) at ViewFactory.create (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/system/view-factory.js:173:22) at BoundViewFactory.create (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/system/view-factory.js:128:39) at Repeat.processItems (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/system/repeat.js:105:36) at Repeat.bind (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/system/repeat.js:60:22) at BehaviorInstance.bind (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/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;
}
}