更新DOM

Question

我为应用使用 vuejs ，为数据库服务使用 firebase 。

数据库结构如下所示：

该应用程序的初始状态如下：

const state :{
    newStatus: [],
    statuses: [],
    initialStatusFetched: false
}

创建应用程序时，在created()生命周期钩子中触发了完整事件，该钩子从firebase获取状态并将其添加到上述初始状态的数组中：

created(){
    //fetches initial status and adds it to statuses[ ]
    function fetchStatus() {
        const ref = firebase.database().ref(); 
        ref.child("allstatuses").once('value', (snapshot) => {
            snapshot.forEach((childSnap) => {
                let childKey = childSnap.ke;
                let childData = childSnap.val();
                let statusData = {
                    key: childKey,
                    statusVal : childData
                }
                state.statuses.unshift(statusData);
                state.loader = false;
                state.initialStatusFetched = true;
            });
        });
    };

    //fetches newly added status and adds it to newStatus[ ]
    function statusAdded() {
        const ref = firebase.database().ref(); 
        ref.child("allstatuses").on('child_added', function(status) {
            if(state.initialStatusFetched){
                let statusData = {
                    key: status.key,
                    statusVal: status.val()
                }
                state.newStatus.push(statusData);
            }
        });
    };

} 

现在使用填充了上面触发的事件的数组，我使用以下模板在页面中填充状态：

<template>
    <div>
      <div>    
          <!--statuses-->
      <div v-for="status in statuses" class="media my-media"> 
          // ommitted all the un-important part
          <div class="media-body">

              <button @click="addlike(status.key, userStatus.loggedIn)" class="btn my-btn">Like</button>
            //displaying number of likes
              <span style="margin-right:20px">{{ status.statusVal.likes }}</span>
              <button @click="addDislike(status.key, userStatus.loggedIn)" class="btn my-btn">Disike</button>
            //displaying number of dislikes
              <span>{{ status.statusVal.dislikes }}</span> 

          </div>          
      </div>
      </div>
  </div>    
</template> 

所以我现在面临的问题是

function updateLikes() {
        const ref = firebase.database().ref(); 
        ref.child("allstatuses/" + statuskey + "/likes").on('value', (snapshot) => {
            // hiw can I fetch the value os statusKey so i can use it above
            console.log(snapshot.val());
        });
    }; 

• 如何获取 statusKey 的值，以便我可以使用它来引用节点并使用上面的代码更新喜欢的值？

• 我如何知道数据库中哪些状态更新了以及状态[]中特定状态的位置，因为新状态添加了状态[]？

Answer 1

对于q1：您需要保留HTML中每个项目的密钥，然后在用户点击它时将其传递到updateLikes()。可能是using a transaction：

function updateLikes(statuskey) {
    const ref = firebase.database().ref(); 
    ref.child("allstatuses/" + statuskey + "/likes")
       .transaction(function(currentValue) {
         return (currentValue || 0) + 2
       });

对于q2：侦听child_changed事件，该事件在子项数据发生变化时触发。鉴于您已经为q1的答案中的每个项目保留了密钥，您现在可以在HTML中查找需要更新的元素：

    ref.child("allstatuses").on('child_changed', function(status) {
        var statusElm = document.getElementById(status.key);
        ... update the HTML for the new status
    });

Answer 2

嗯，不知道vue.js，但在纯Javascript中它会是这样的：

<div id="likes"></div>

在ref.on('value', function(snap){})内部您将映射，直至到达child“喜欢”，并将值放在变量value中，例如：

let likes = document.getElementById('likes');
likes.innerHTML(value);