Polymer Data-Binding will not replace

Question

I have a polymer element that refuses to bind, and I can't figure out why. The rendered output is just sending the raw {{varName}} rather than replacing it with the appropriate value. However, formulas (with the [[fn(arg)]] syntax) and binding to tags (with the $="{{varName}} syntax) works fine.

Any idea what could be causing this?

Here is the template:

<dom-module id="hex-grid-element">
    <template>
        <link rel="stylesheet" type="text/css" href="hex-grid-element.css"></link>
        <div id="grid"></div>
        <br>
        <div id="count">Count: {{hexes}}</div>
    </template>

    <script src="hex-grid-element.js"></script>
</dom-module>

Answer 1

You need to put your data inside a span:

"The binding annotation must currently span the entire content of the tag. String concatenation is not supported inside a tag, and the tag can’t contain any whitespace"

see: Polymer Documentation on binding to text content