JSFiddle - React, Tailwind, and code Playground

by cahnory

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<div id="ref">
    <p>
        1. <span data-foo="&#x2713;">&amp;#x2713;</span>
    </p>
</div>

<div id="view"></div>
<script type="text/ractive" id="template">
    <p>
    2. <span data-foo="&#x2713;">&amp;#x2713;</span><br />
       <em>(should be the same as `1`. Weird, it "unconverted" an originally converted entity)</em>
    </p>
    <p>
    3. <span data-foo="{{ foo }}">{{ '{{ foo }}' }}</span><br />
       <em>(ok, HTML entities converted)</em>
    </p>
    <p>
    4. <span data-foo="{{{ foo }}}">{{ '{{{ foo }}}' }}</span><br />
       <em>(html entities should not be converted)</em>
    </p>
</script>

CSS

[data-foo] {
    font-weight: bold;
}
[data-foo]:after {
    content: ': ' attr(data-foo);
    color: #4679bd;
    font-weight: normal;
}
em {
    color: #666;
}

JavaScript

new Ractive({
    el: '#view',
    template: '#template',
    data: {
        foo: '&#x2713;'
    }
});