Skip to content
New issue

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

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

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

No branches or pull requests

1 participant