title: How to pass my updated array into my .handelbars file
body: <p>been stuck with this for a few days now.</p>
  
  <p>In my application, when my listview.handelbars loads I am pulling my data from firebase. A number of objects (with data about rooms) that after this pull are being pushed in een array called allRooms[].</p>
  
  <p>After that, the update compile passes this array on to my listview.handelbars file where everything gets put properly inside the html and handlebars tags. This is al working very fine and gives me the proper outcome in browser.</p>
  
  <p>But then I need to be able to sort this objects by there properties -distance.
  So I made a function to do that and i store the sorted objects in the array sortedRooms[]; </p>
  
  <p>So far so good. My question now is how do I pass this new sorted array on to my .handlebars file?</p>
  
  <p>I tried to execute an update compile again inside my function sortRooms() and this worked but then i'm getting other problems (not able to go to detailview anymore for one).</p>
  
  <p>Also important is that this sorted objects must only be shown by a button press. So at first i want to output the objects in the order they where added to firebase.</p>
  
  <p>Here is my code</p>
  
  <pre><code>// JAVASCRIPT    
  
  ref.on("value", function (data) {
      let rooms = data.val();
      if (rooms === undefined || rooms === null) {
          console.log('geen data');
      } else {
          let keys = Object.keys(rooms);
      roomKeys.push(keys);
  
      for (let i = 0; i &lt; keys.length; i++) {
          let k = keys[i];
          Room = {
              rentalPrice: rooms[k].rentalPrice,
              warrant: rooms[k].warrant,
              type: rooms[k].type,
              surface: rooms[k].surface,
              floors: rooms[k].floors,
              numberOfPersons: rooms[k].numberOfPersons,
              toilet: rooms[k].toilet,
              douche: rooms[k].douche,
              bath: rooms[k].bath,
              kitchen: rooms[k].kitchen,
              furnished: rooms[k].furnished,
              address: rooms[k].address,
              ownerKey: rooms[k].ownerKey,
              lat: rooms[k].lat,
              lon: rooms[k].lon,
              image: rooms[k].image,
              roomKey: keys[i],
              adminName: rooms[k].adminName
          }
          allRooms.push(Room);
      }
  }
  })
  
  
  update(compile(studentListViewTemplate)({
  allRooms,
  }));
  
  
  let sortedRooms = allRooms.sort((a, b) =&gt; a.distance - b.distance);
  console.log(sortedRooms);
  
  // Question ?? -&gt; How to pass this sorted array on to my handelbars
  
  
  // HANDLEBARS
  
      {{#each allRooms }}
      &lt;div class="info-list" id="regularInfoList"&gt;
          &lt;h5 class="card-room-type-lv"&gt;{{ this.type }}&lt;/h5&gt;
          &lt;div class="info-list-img"&gt;
              &lt;img src="{{ this.image }}" class="room-picture-list" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="info-list-text"&gt;
              &lt;div class="sub-div"&gt;
                  &lt;p class="card-titles-lv width"&gt;&lt;/p&gt;
                  &lt;p class="card-values-lv card-surface"&gt;{{ this.surface }} 
  m²&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="sub-div"&gt;
                  &lt;p class="card-titles-lv distance"&gt;&lt;/p&gt;
                  &lt;p class="card-values-lv card-distance"&gt;{{ this.distance }} 
  km&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="sub-div"&gt;
                  &lt;p class="card-titles-lv price"&gt;&lt;/p&gt;
                  &lt;p class="card-values-lv card-price"&gt;€ {{ this.rentalPrice 
  }}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      {{else}}
      &lt;p style="text-align:center"&gt;Nog geen koten om weer te geven&lt;/p&gt;
      {{/each}}
  </code></pre>