Backbone.jsを使用して読み込んだJSONを表示するサンプル

HTML

<div id="list"></div>
<div id="listDetail"></div>

<script type="text/template" id="tempList">
<ul>
  <% _.each(model, v => { %>
    <li><%= v.name %> <%= v.age %></li>
  <% }) %>
</ul>
</script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://underscorejs.org/underscore.js"></script>
<script src="https://backbonejs.org/backbone.js"></script>

JavaScript

const Model = Backbone.Model.extend({})
const Collection = Backbone.Collection.extend({
  url: 'https://jsonbox.io/box_f7b6c58358498848a89c'
})
const View = Backbone.View.extend({
  el: '#list',
  template: _.template($('#tempList').html()),
  collection: new Collection(),
  initialize() {
    this.collection.fetch()
    this.listenTo(this.collection, 'sync', this.render)
  },
  render() {
    const html = this.template({
      model: this.collection.toJSON()
    })
    this.$el.html(html)
  },
})
new View()

元記事を表示する