I'm new to Polymer and while testing data-binding, I discover that I have to encapsulate double-mustache expressions within HTML tags (for example <span>{{var}}</span>
).
If not, variable is simply not expanded and printed as is.
An exemple (from Polymer Quick Tour), with a line more to show this behaviour. You can also find it on Plunker.
<dom-module id="name-tag">
<template>
<!-- Will print : This is {{owner}}'s name-tag element. -->
This is {{owner}}'s name-tag element.<br />
<!-- Will print : This is Daniel's name-tag element. -->
This is <b>{{owner}}</b>'s name-tag element.
</template>
</dom-module>
<script>
Polymer({
is: "name-tag",
ready: function() {
// set this element's owner property
this.owner = "Daniel";
}
});
</script>
Did I miss something on the documentation, or is this some kind of bug ?
To the ones that reads this question today
This behavior seems to have been fixed, in the example on Plunkr, there is no problem anymore.
According to the docs :
This means you currently have to wrap your bindings in a tag as you did in this example:
This is <b>{{owner}}</b>'s name-tag element.
I expect in the future this will be changed so that you don't have to wrap bindings in a tag.