CODEWITHSUNDEEP
htmlrivets.jshtml5-templatetemplatetag
Ryan Worsley
Ryan Worsley

Reputation: 655

How would you use rivets.js with HTML template tags

HTML has a draft specification for a < template > tag. Details here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

I'm thinking about using Rivets.JS on a new project, I also want to use this new template tag.

Can the two be made to work together nicely?

I imagine I'd want to tell rivets something along the lines of 'get this template, bind it to this data and output the result here'.

Upvotes: 1

Views: 959

Answers (1)

Jeff
Jeff

Reputation: 12418

You can copy the template as your normally would, and then use Rivets to bind to your new element. demo @ jsfiddle

HTML:

<template id="demo">
    <p id="tag">{ demo.info }<p>
</template>

Javascript:

var demo = {
    info: "Test string"
}

// Copy template data to visible DOM
var el = document.getElementById("demo");
var clone = document.importNode(el.content, true);
document.body.appendChild(clone);

// Bind using Rivets as normal
var tag = document.getElementById("tag");
rivets.bind(tag, { demo: demo });

Upvotes: 1

Related Questions