跳到主要内容

riotjs

直接通过浏览器使用

var tags = `
<pusher>
<h3>{ message }</h3>
<ul>
<li each={ techs }>{ name }</li>
</ul>

<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML' },
{ name: 'JavaScript' },
{ name: 'CSS' }
]
</script>

<style scoped>
:scope { font-size: 2rem }
h3 { color: #444 }
ul { color: #999 }
</style>
</pusher>
`;

if (!window.jQuery) {
document.head.appendChild(
Object.assign(document.createElement('script'), { src: 'https://code.jquery.com/jquery-2.2.3.js', onload: setup }),
);
} else {
setup();
}

function setup() {
$.getScript('https://cdn.jsdelivr.net/riot/2.3/riot+compiler.min.js')
.done(() => $('pusher, script[type="riot/tag"]').remove())
.done(() => $('body').append($('<script type="riot/tag"></script>').text(tags)).append($(`<pusher></pusher>`)))
.done(() => riot.mount('pusher'));
}
<!-- mount point -->
<my-tag></my-tag>

<!-- inlined tag definition -->
<script type="riot/tag">
<my-tag>
<h3>Tag layout</h3>
<inner-tag />
</my-tag>
</script>

<!-- <inner-tag/> is specified on external file -->
<script src="path/to/javascript/with-tags.js" type="riot/tag"></script>

<!-- include riot.js and the compiler -->
<script src="https://cdn.jsdelivr.net/riot/2.6/riot+compiler.min.js"></script>

<!-- mount normally -->
<script>
riot.compile(my_tag.innerHTML);
riot.mount('*');
</script>