How to inherit a variable in Polymer?

Question

I have the following HTML.

<iron-pages id="pages" role="main" selected="[[_page]]" attr-for-selected="name">

    <marked-element name="[[_page]]">
        <div slot="markdown-html"></div>
        <script type="text/markdown" src="/src/markdown/[[_page]].md"></script>
    </marked-element>

</iron-pages>

The [[_page]] variable works fine except as src value. The result is: marked-element.html:315 GET http://localhost:8081/src/markdown/.md 404 (Not Found)

How can I make marked-element inherit the _page variable?

wouldn't be better to create script tag in javascript and then append it at the end of body? Another way, use `` — Kuba Šimonovský, May 30 '17 at 12:27

score 1 · Accepted Answer · answered May 30 '17 at 20:16

Polymer does not allow to create/append strings inline so you have to create a new variable with the complete string in it. Also if you want to write something in a default html attribute like src you have to add a $ to its name.

<script type="text/markdown" src$="[[_url]]"></script>

//Somewhere in your component
this.set('_url', '/src/markdown/' + this._page + '.md');

How to inherit a variable in Polymer?

1 Answers1