Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
TheMarksman opened this issue Nov 4, 2014 · 0 comments
Open

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

TheMarksman opened this issue Nov 4, 2014 · 0 comments

Comments

@TheMarksman
Copy link

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant