bus/modules/ruling_bus/_ruling_bus_widget1.html.erb

<div id="{{update_id}}" class="bus_widget1" data-list="bus_infos" data-level="0">
  <div class="bus_info" id="{{bus_id}}">
    <div class="row mt-10">
      <div class="col-sm-12 bus_title">
        <i class="fa fa-bus"></i>
        <strong>{{bus_title}}</strong>
      </div>
    </div>
    <div class="row bus_data" data-list="bus_data" data-level="1">
        <div class="col-sm-6">
          <div>
            <strong class="route_name">{{route_name}}:</strong>
            <span class="bus_time">{{time_to_arrive}}</span>
          </div>
        </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function update_bus(ele){
    var $self = $(ele);
    var bus_info_ids = $.map($self.find('.bus_info'),function(v){
      return $(v).attr('id');
    });
    $.{{update_method}}( "{{update_url}}",
      {
        bus_info_ids: bus_info_ids
      }, function( data ) {
        $.each(data,function(k,v){
          var bus_info = $self.find('#'+k);
          var bus_route_names = $.map(bus_info.find('.route_name'),function(v1){
            return $(v1).text().slice(0,-1)
          });
          var bus_time_span = bus_info.find('.bus_time');
          $.each(v,function(k,v1){
            var i = bus_route_names.indexOf(v1.route_name);
            if (i>=0){
              bus_time_span.eq(i).html(v1.time_to_arrive);
            }
          })
        })
        window.setTimeout(function(){
          update_bus(ele);
        },{{update_interval}});
    });
  }
  function update_interval_bus(ele) {
    window.setTimeout(function(){
      update_bus(ele);
    },{{update_interval}});
  }
  update_interval_bus($('#{{update_id}}[data-list="bus_infos"]')[0]);
</script>
<style type="text/css">
  .bus_widget1 {margin-top: 1em;}
  .bus_info {line-height: 1.8;}
</style>