JSFiddle - React, Tailwind, and code Playground

by rightson

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Learning About Backbone.js Views</title>
</head>
<body>

<div id="container">
    <button>Load</button>
    <ul id="list">
    </ul>
</div>

<div id="list-template">
<li><a href=""></a></li>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
</body>
</html>

CSS

#container { padding:20px; border:1px solid #333; width:400px; }
#list-template { display:none; }

JavaScript

myModel = new Backbone.Model({
    data:[
        { text: "Google", href: "http://google.com" },
        { text: "Facebook", href: "http://facebook.com" },
        { text: "Youtube", href: "http://youtube.com" }
    ]
});

var myView = Backbone.View.extend({
    initialize: function () {
        console.log('create view');
    },
    el: '#container',
    events: {
        "click": "render"
    },
    template: $('#list-template').children(),
    render: function() {
        var data = this.model.get('data');

        for (var i=0, l=data.length; i<l; i++) {
          var a = this.template.clone().find('a');
          var li = a.attr('href', data[i].href)
          li = li.text(data[i].text).end();
          this.$el.find('ul').append(li);
        }
    }

});

var view = new myView({ model: myModel });