Question

被困住了几天。

在我的应用程序中，当我加载listview.handelbars时，我正在从firebase中提取数据。在拉动之后将许多对象（包含有关房间的数据）推入称为allRooms []的数组。

此后，更新编译将此数组传递给我的listview.handelbars文件，所有内容均正确放置在html和handlebars标记内。一切正常，可以在浏览器中给我适当的结果。

但是然后我需要能够通过-distance属性对这些对象进行排序。因此，我做了一个函数，将已排序的对象存储在数组sortedRooms []中。

到目前为止，一切都很好。我现在的问题是如何将这个新的排序数组传递到我的.handlebars文件中？

我试图在我的函数sortRooms（）中再次执行更新编译，此方法起作用了，但是随后我遇到了其他问题（无法再进入detailview了）。

同样重要的是，只能通过按按钮显示此排序的对象。因此，起初我想按照将对象添加到Firebase中的顺序输出对象。

这是我的代码

// 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 < 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) => a.distance - b.distance);
console.log(sortedRooms);

// Question ?? -> How to pass this sorted array on to my handelbars


// HANDLEBARS

    {{#each allRooms }}
    <div class="info-list" id="regularInfoList">
        <h5 class="card-room-type-lv">{{ this.type }}</h5>
        <div class="info-list-img">
            <img src="{{ this.image }}" class="room-picture-list" alt="">
        </div>
        <div class="info-list-text">
            <div class="sub-div">
                <p class="card-titles-lv width"></p>
                <p class="card-values-lv card-surface">{{ this.surface }} 
m²</p>
            </div>
            <div class="sub-div">
                <p class="card-titles-lv distance"></p>
                <p class="card-values-lv card-distance">{{ this.distance }} 
km</p>
            </div>
            <div class="sub-div">
                <p class="card-titles-lv price"></p>
                <p class="card-values-lv card-price">€ {{ this.rentalPrice 
}}</p>
            </div>
        </div>
    </div>
    {{else}}
    <p style="text-align:center">Nog geen koten om weer te geven</p>
    {{/each}}

Answer 1

使用已排序数组的模板内部的allRooms重新编译模板。值到达时应进行排序和更新，因此在回调内部：

ref.on("value", function (data) {
  // no need for a for loop if you use Object.values
  const allRooms = Object.values(data.val());
  // sort mutates the array, it doesnt return a new one
  allRooms.sort((a, b) => a.distance - b.distance);
  // update afterwards.
  update(compile(studentListViewTemplate)({
    allRooms,
  }));
});

如何将更新后的数组传递到.handelbars文件中

1 个答案: