Как передать мой обновленный массив в мой файл .handelbars - PullRequest
Новая
       16

Как передать мой обновленный массив в мой файл .handelbars

0 голосов
/ 01 января 2019

застрял с этим в течение нескольких дней.

В моем приложении, когда загружается мой listview.handelbars, я извлекаю свои данные из firebase.Ряд объектов (с данными о комнатах), которые после этого извлечения помещаются в массив een, называемый allRooms [].

После этого компиляция обновления передает этот массив в мой файл listview.handelbars, где все получаетпоместите правильно внутри тегов html и handlebars.Это все работает очень хорошо и дает мне правильный результат в браузере.

Но тогда мне нужно иметь возможность отсортировать эти объекты по свойствам -distance.Поэтому я сделал для этого функцию и сохраню отсортированные объекты в массиве sortedRooms [];

Пока все хорошо.Мой вопрос сейчас заключается в том, как передать этот новый отсортированный массив в мой файл .handlebars?

Я попытался снова выполнить компиляцию обновления внутри моей функции sortRooms (), и это сработало, но затем у меня возникли другие проблемы(больше не может переходить в подробный вид).

Также важно, чтобы отсортированные объекты отображались только нажатием кнопки.Поэтому сначала я хочу вывести объекты в том порядке, в котором они были добавлены в базу данных.

Вот мой код 

// 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}}

1 Ответ

0 голосов
/ 01 января 2019

Перекомпилируйте шаблон с 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,
  }));
});
...