JSFiddle - React, Tailwind, and code Playground

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
});