Backbone

by Steven Senkus

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- http://developer.trimet.org/ws/V1/arrivals/?appID=5E48DCD7031297B7CBF2F37FD&locIDs=2580 -->
<script type="text/template" id="arrivalTemplate">
    <div class="panel-heading"<h3><%= shortSign %></h3></div>
    <div class="panel-body">
    <ul>
        
        <li><%= fullSign %></li>
        <li><%= estimated %></li>
        </ul>
        </div>
</script>
            <div class="container">
            <ul id="arrivalsContainer"></ul>
            </div>

CSS

.container {
    padding: 0px;
    
}
.panel {
    margin: 0;
}

JavaScript

var trimetUrl = 'http://developer.trimet.org/ws/V1/arrivals/?appID=5E48DCD7031297B7CBF2F37FD&locIDs=2580&json=true';
var Arrival = Backbone.Model.extend({
    defaults: {
        route: 99,
        fullSign: 'fullSign default'
    }
});

var Arrivals = Backbone.Collection.extend({
    model: Arrival,
    url: trimetUrl,
    parse: function (resp) {
        console.log(resp['resultSet']['arrival'])
        return resp['resultSet']['arrival'];


    }
});

var ArrivalView = Backbone.View.extend({
    //tagName: 'li',
    template: _.template($('#arrivalTemplate').html()),
    initialize: function () {
        this.render();
    },
    render: function () {
        this.$el.html(this.template(this.model.toJSON())).hide()
        this.$el.addClass('panel panel-primary').fadeIn(500)
        return this;
    }
});


var arrivals = new Arrivals();
arrivals.fetch().then(function () {
    console.log(arrivals)
    arrivals.each(function (arr) {
        console.log('arrival', arr)
        var arrView = new ArrivalView({model: arr})
        arrView.$el.appendTo('#arrivalsContainer');
    });

});

setInterval(function() {
    arrivals.reset();
    
arrivals.fetch().then(function () {
    $('#arrivalsContainer').empty();
    console.log(arrivals)
    arrivals.each(function (arr) {
        console.log('arrival', arr)
        var arrView = new ArrivalView({model: arr})
        arrView.$el.appendTo('#arrivalsContainer');
    });

});

}, 10000)
/*
$.ajax({
    url: trimetUrl
}).done(function (data) {
    alert(1)
    console.log(data)
});


*/