Skip to content

Can't create views with non-xhtml namespaceUri #4

Open
@TheMarksman

Description

@TheMarksman

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions