cth-student-list.html

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<link rel="import" href="../bower_components/core-selector/core-selector.html">
<link rel="import" href="../elements/cth-student-row.html">

<script src="../bower_components/lodash/dist/lodash.js"></script>
<script src="../bower_components/reqwest/reqwest.js"></script>

<polymer-element name="cth-student-list" attributes="selectedStudent">

  <template>
    <link href='./cth-student-list.css' rel='stylesheet' type='text/css'>

    <core-ajax url="https://ast2014.firebaseio.com/students/.json" 
                  auto response="{{rawStudents}}">
    </core-ajax>

    <ul>
      <core-selector selectedClass="select" selectedModel={{selectedItem}}">
        <template repeat="{{ student in students }}">
          <li class="student-info"
              id="{{student.studentId}}">
            <div class="image"><img class="person" src="{{student.picture}}"/></div>
            <div class="full-name"><p>{{ student.firstName }} {{ student.lastName  }}</p></div>
            <div class="student-id"><p>{{ student.studentId  }}</p></div>
          </li>
        </template>
      </core-selector>
    </ul>
  </template>

  <script>
    Polymer('cth-student-list', {

      selectedItemChanged: function(){
        this.selectedStudent = this.selectedItem.student;
      },

      rawStudentsChanged: function(){
        this.indexedStudents = _.map(this.rawStudents, function(student, index){
          if(student) {
            student.firebaseId = index;
          }
          return student;
        });

        this.students = _.compact(this.indexedStudents);
        
        this.picturedStudents = _.map(this.students, function(student){
          student.picture = "./elements/person.svg";
          if(student.github && student.github.githubName){ 
            reqwest({
              url: 'https://api.github.com/users/' + student.github.githubName, 
              method: 'get', 
              success: function (resp) {
                student.picture = resp.avatar_url;
              }});
          }
        });
      }
    });
  </script>
</polymer-element>