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()
元記事を表示する