Nullifying Precipitation Machine
    Have ideas to improve npm?Join in the discussion! »

    utemplate

    2.2.5 • Public • Published

    µtemplate

    Currently available on github and npm

    NPM

    Templates are supported by default in HTML5, this is a single lightweight script to prepare them for you.

    1. Create your template, it won't be rendered
    2. Decide where it belongs
    3. Prepare the template with some data
    4. Insert the prepared template into the DOM

    install

    npm

    npm i --save utemplate

    git

    git clone git@github.com:Announcement/utemplate.git

    usage

    head

    It doesn't have to be in the head, put it wherever you want, just make sure it's loaded before the script is run. We chose this location because if you don't have a <head> and <body> tags, most parsers throw the <template> in there by default.

    <template id="message">
      <article>
        <h2>{title}</h2>
        <p>{message}</p>
      </article>
    </template>

    body

    This is where we're going to put it for all to see

    <section id="messages">
    </section>

    script

    First, let's generate a new Template from our previously defined element.

    Note that this can use the following provided by Alchemist

    template = new Template("#message");

    Next, we need to provide some data.

    template.pipe({
      title: 'Hello, world!',
      message: 'How are you today?'
    });

    And decide what to do with it.

    // attach it to the DOM (now via a querySelector)
    template.pipe('#messages');

    frequently asked questions

    That's nice, but why is it useful?

    In the real world, data is going to be from a source. My environment has a couchdb document, but yours can be whatever you want it to be

    • avoid writing html inside of javascript
    • don't document.createElement or document.createTextNode by hand
    • no more writing stringified json to the document.

    Where does my data come from?

    The properties directly correspond to the text inside of the template and are automatically filled with those keys.

    As of version utemplate@1.1.0 they can be multiple levels deep such as {a: {b: {c: 'd'}}} and the template requests {a.b.c}

    Why wouldn't I use Angular, Meteor, or something better

    If you enjoy reading and learning new things, then those will probably better for you. But if you want something small, fast and want it to just work, then microTemplates are for you.

    Ours is very small and easy to learn, so if you're a beginner (or a minimalist like myself), then you should definately start here.

    Install

    npm i utemplate

    DownloadsWeekly Downloads

    4

    Version

    2.2.5

    License

    MIT

    Last publish

    Collaborators

    • avatar