Open
Description
Background
I am using derby-standalone to prototype an app.
I want to use d3 behaviors installed on individual view elements without resorting to weird calls in the templates.
However, when creating a g
as the root element of a component, its namespaceUri
is assumed to be xhtml
, because it doesn't inherit anything from the parseNode.parent
(undefined
), and there appears to be no way to inject it: because of this, it will not be drawn... we had to use the svg-crowbar to even determine the namespace!
Example
<script type="text/template" id="d-cards">
<div class="cards">
<svg width="100%" height="100%">
<g class="root">
{{each cards as #d, #i}}
<view name="d-card" layout={{#d}}></view>
{{/each}}
</g>
</svg>
</div>
</script>
<script type="text/template" id="d-card">
<!-- i get created as xhtml:g! -->
<g class="card">
<rect x="{{layout.x}}" y="{{layout.y}}" width="{{layout.width}}" height="{{layout.height}}">
</rect>
</g>
</script>
Possible Solution
One possible solution would be to allow template writers to add an xmlns
attribute to the g
:
var namespaceUri = attributes.xmlns ? attributes.xmlns :
(lowerTagName === 'svg') ? templates.NAMESPACE_URIS.svg :
parseNode.namespaceUri;
This would let a single template be written, for example, for both svg and html embedding:
<script type="text/template" id="d-card">
{{ if layout.renderer == "svg" }}
<g class="card" xmlns="http://www.w3.org/2000/svg">
<rect x="{{layout.x}}" y="{{layout.y}}" width="{{layout.width}}" height="{{layout.height}}">
</rect>
</g>
{{ else }}
<div class="card" style="left:{{layout.x}}; top:{{layout.y}}; width:{{layout.width}}; height:{{layout.height}};">
</div>
{{ /if }}
</script>
Metadata
Metadata
Assignees
Labels
No labels