Support namespaced attributes with default attr binding #1066
Conversation
Attribute namespaces can be defined by `xmlns:<i>prefix</i>="namespace-url"` attributes, and allow all descendents of that element to define `<i>prefix</i>:name="value"` attributes.
The DOM provides a way to lookup which namespace an attribute name belongs to given the element the attribute will be bound to, Node.lookupNamespaceURI (http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespaceURI). Given the namespace, it's simple to add/remove the desired attribute with the correct namespace using the Node.setElementNS and Node.removeAttributeNS.
| ].join(''); | ||
|
|
||
| ko.applyBindings(model, testNode); | ||
| var anchor = testNode.childNodes[0]/*svg*/.childNodes[0]/*g*/.childNodes[0]/*a*/; |
There was a problem hiding this comment.
Since I've heard this is a bit unclear:
testNode.childNodes[0]. // the <svg> is the first child of the testNode
childNodes[0]. // the <g> is the first child of the <svg>
childNodes[0]; // the <a> is the first child of the <g>
I was trying to use the inline comments to make this more clear, but evidently that backfired :)
There was a problem hiding this comment.
Yes, it looks a bit like intermixing weird XPath syntax and JS, the missing syntax highlighting doesn't help either. :)
|
I too need this feature. I'm in the exact same situation where I need xlink:href to work. |
|
+1 |
|
It's been two, almost three years, since that feature was requested. What is happening? Why is this PR not merged yet? Big bump! |
|
Submit a PR and I'll merge this against tko.binding.core/src/attr.js |
|
@brianmhunt I would love to, but I can't seem to run tko.binding.core's tests right now: I'm not sure what in the tko.binding.core configuration chain is causing Tell me how I can test my PR, and I'll gladly submit it. |
|
Thanks @rampion – I just broke the testing – we're moving to a monorepo (at knockou/tko) so there are a few hitches, like this, as I nail tooling down. You can either checkout from a few days ago (where testing should work) or give me a couple days and I'll have it working – it'll be in the monorepo at github.com:knockout/tko's packages/tko.binding.core directory. Please ping me if I haven't gotten back by next week! Thanks @rampion |
|
Can I help somehow? |
|
Turns out some browsers (Chrome) don't like it when you use |
When using knockout to create manage SVG or XML nodes, it is sometimes desirable to have it manage attributes from specific namespaces. For example, links in SVG documents use the
xlinknamespace. Currently, theattrbinding doesn't support attribute namespaces, as can be seen in this fiddle. The hardcodedxlink:hrefworks as a link, while thexlink:hrefattribute created by knockout doesn't, because it doesn't have the right namespace.This could certainly be compensated for by creating a
attr-nsbinding just to handle namespaced attributes, however not only would this have a high degree of code repetition, but this breaks the similarity between hardcoded attribute and attributes defined byattr. The HTML parser is smart enough to figure out which attributes have namespaces, why shouldn't knockout do the same? The DOM provides theNode.lookupNamespaceURI(),Node.setAttributeNS()andNode.removeAttributeNS()methods just for this purpose.This pull request uses these API functions to add namespace support to the default
attrbinding. It also adds a test to the spec to check that namespace support is working properly.ref: http://stackoverflow.com/questions/18083723/how-can-i-get-knockout-js-to-set-the-namespaceuri-for-attributes