Created by Alan Palazzolo
[
{
"Actual": true,
"BlockNumber": 1122,
"DepartureText": "3 Min",
"DepartureTime": "/Date(1377800220000-0500)/",
"Description": "Emerson/26Av-Broadway",
"Gate": "",
"Route": "5",
"RouteDirection": "NORTHBOUND",
"Terminal": "F",
"VehicleHeading": 0,
"VehicleLatitude": 44.9888311,
"VehicleLongitude": -93.2898608
},
...
]
<h2>Bus Stop: {{stop}}</h2>
<ul>
{{# buses:i}}
<li>{{Route}}{{Terminal}} in {{DepartureText}}.</li>
{{/ buses}}
</ul>
var $el = $('.container-output');
var template = $('#template-id');
var ractiveView = new Ractive({
el: $el,
template: template,
data: {
stop: busStop,
buses: [ .. ]
}
});
<h2>Bus Stop: {{stop}}</h2>
<ul>
{{# buses:i}}
<li>{{Route}}{{Terminal}}
{{# Actual}}
{{ DepartureText.toLowerCase() === 'due' ? 'is Due' : 'arrives in ' + DepartureText }}
{{/ Actual}}
{{^ Actual}} arrives at {{DepartureText}}{{/ Actual}}.
</li>
{{/ buses}}
</ul>
var ractiveView = new Ractive({
el: $el,
template: template,
data: {
stop: busStop,
buses: []
}
});
onBusUpdate(function(data) {
ractiveView.set('buses', data);
});
var buses = { a: 1, b: 2 };
var ractiveView = new Ractive({
el: $el,
template: template,
data: {
stop: busStop,
buses: buses
}
});
buses.c = 4;
ractiveView.update('buses');
var buses = [];
var count = 0;
var ractiveView = new Ractive({
el: $el,
template: template,
data: {
stop: busStop,
buses: buses
}
});
onBusUpdate(function(data) {
buses.push(data[count++]);
});
ractiveView.observe('stop', function(e) {
busStop = this.get('stop');
poller.update();
});
ractiveView.set('stop', '17982');
<h2>Bus Stop: {{stop}}</h2>
<ul>
{{# buses:i}}
<li on-hover="highlight">{{Route}}{{Terminal}}
{{# Actual}}
{{ DepartureText.toLowerCase() === 'due' ? 'is Due' : 'arrives in ' + DepartureText }}
{{/ Actual}}
{{^ Actual}} arrives at {{DepartureText}}{{/ Actual}}.
</li>
{{/ buses}}
</ul>
ractiveView.on('highlight', function(e) {
$(e.original.target).toggleClass('highlight');
});
<a href="#" on-tap="closest" class="geolocate-stop" title="Find closest stop"></a>
<h2>Bus Stop: {{stop}}</h2>
<ul>
{{# buses:i}}
<li on-hover="highlight">{{Route}}{{Terminal}}
{{# Actual}}
{{ DepartureText.toLowerCase() === 'due' ? 'is Due' : 'arrives in ' + DepartureText }}
{{/ Actual}}
{{^ Actual}} arrives at {{DepartureText}}{{/ Actual}}
</li>
{{/ buses}}
</ul>
ractiveView.on('closest', function(e) {
e.original.preventDefault();
getClosestStop(function(stop) {
ractiveView.set('stop', stop);
});
});
<a href="#" on-tap="closest" class="geolocate-stop" title="Find closest stop"></a>
<h2>Bus Stop: {{stop}}</h2>
<div class="actions">
<label>Update stop:</label> <input type="text" value="{{stop}}" />
</div>
var ractiveView = new Ractive({
el: $el,
template: template,
data: {
stop: busStop,
buses: [],
formatTime: function(moment, format) {
format = format || 'h:mm A';
return moment.format(format);
}
}
});
<ul>
{{# buses:i}}
<li on-hover="highlight">{{Route}}{{Terminal}}
{{# Actual}}
{{ DepartureText.toLowerCase() === 'due' ? 'is Due' : 'arrives in ' + DepartureText }}
{{/ Actual}}
{{^ Actual}} arrives at {{formatTime(time)}}{{/ Actual}}
</li>
{{/ buses}}
</ul>
<ul>
{{# buses:i}}
<li on-hover="highlight" intro="slide">{{Route}}{{Terminal}}
{{# Actual}}
{{ DepartureText.toLowerCase() === 'due' ? 'is Due' : 'arrives in ' + DepartureText }}
{{/ Actual}}
{{^ Actual}} arrives at {{formatTime(time)}}{{/ Actual}}
</li>
{{/ buses}}
</ul>
ractiveView.observe('buses', function(oldV, newV) {
_.each(newV, function(b, i) {
var path = 'buses.' + i + '.minutes';
ractiveView.animate(path, b.minutes, {
duration: 1000,
step: function(t, value) {
ractiveView.set(path, poller.colorScale(value).hex());
return value;
},
});
});
});
console.log('FAIL');