等待返回之前从Firebase获取数据

时间:2017-09-18 11:44:21

标签: json firebase-realtime-database ecmascript-6 es6-promise

我有以下代码:

更新

const showEvent = (eventLink) => {
  let {events
  } = database
  let staffMembers = ""
  let scenesList = ""
  const staffMembersContainer = $('.staff-members')
  const scenesContainer = $('.scenes')
  const eventsGrid = $('#events-grid')
  const eventHeader = $('#events-grid h2')
  const eventKey = eventLink.getAttribute('data-key')
  const {
    name,
    staff,
    scenes
  } = events[eventKey]
  eventHeader.innerText = name
  eventsGrid.classList.toggle("hidden")
  Object.keys(staff).forEach(role => {
    const staffMember = staff[role]
    staffMembers += Staff(role, staffMember)
  })
  staffMembersContainer.innerHTML = staffMembers
  Object.keys(scenes).forEach(scene => {
    scenesList += Scene(scenes[scene])
  })
  scenesContainer.innerHTML = scenesList
}

const Staff = (role, staffMember) => {
  const {
    name
  } = database.profiles[staffMember[0]]
  return `
     <li>
       <p>${role}:</p>
       <p>${name}</p>
     </li>
  `
}

const Scene = (id) => {
  let promises = []
  const {
    name,
    concerts
  } = database.scenes[id]
  let concertList = ""

  concerts.forEach(concert => {
    promises.push(
      Concert(concert).then(bandName => {
        concertList += `<li><p>${bandName}</p></li>`
      })
    )
  })
  return Promise.all(promises).then(() => {
    return `
    <li class="scene">
      <p>Scene ${name}:</p>
      <ul>
        ${concertList}
      </ul>
    </li>
    `
  })
}

const Concert = (id) => {
  const bandId = database.concerts[id].band
  return firebase.database().ref(`/bands/${bandId}/name`).once('value').then(snap => {
    return snap.val()
  })
}

所以我想生成两个列表,一个包含Staff成员,另一个包含场景列表,其中场景本身是Band名称列表。在我发现之前,我只能得到简单的HTML元素,我应该等到从Firebase获取数据。由于这是我第一次尝试承诺,代码有点乱,可能在几点上被打破。

如果有人有时间提供帮助,我会非常感激!

由于

0 个答案:

没有答案