Ractive.js Test I

Testing ractive.js library

by Yogesh Rathod

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ractive.js/0.3.3/ractive.min.js"></script>
<title>Ractive Test I</title>
{{#user}}
<div intro='fade'>{{first}} {{last}}</div>
{{/}}

CSS

body {
    padding-top: 1em;
    font-family: helvetica, sans-serif;
}
div {
    padding-left: 1em;
}
h3 {
    color: #880000;
    font-weight: bold;
    text-align: center;
    font-size: 20pt;
}
#container {
    padding-top: 2em;
    padding-bottom: 2em;
    width: 80%;
    margin: auto;
    border: 1px solid;
    border-radius: 7px;
}

JavaScript

var r = new Ractive({
    el: document.body,
    template: '#template',
    data: {
        user: [{
            first: 'sam',
            last: 'smith'
        }]
    },
    complete: function(){
        this.merge('user', [{
            first: 'jane',
            last: 'johnson'}])
    }
})