javascript - 如何在不从 firebase 重新加载页面的情况下更新数据

Question

我正在尝试实现一个简单的收藏夹系统。在页面加载上，帖子会列在主页上，任何以前收藏的名为 nubs 的帖子都会在其下方显示 FAVED 标签。

<div class="list-group" ng-repeat="nub in nubs">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">{{nub.title}}</h4>
    <p class="list-group-item-text">{{nub.description}}</p>
    <p class="list-group-item-text">{{nub.synopsis}}</p>
    <li ng-repeat="url in nub.attachmentsUrls">
      <p class="list-group-item-image">
        <img ng-src={{url}} />
      </p>
    </li>
  </a>
  <button ng-click="toggleFav(nub)">favorite</button>
  <p ng-show="getFaved(nub.$id)">FAVED</p>
</div>

这是可行的，但是当我将某些内容添加到我的收藏夹时，页面不会更新以反射(reflect)新收藏的帖子。我想让我的页面积极响应 toggleFav 功能。

这是我的 Controller

var ref = new Firebase("https://xxxxx.firebaseio.com");
var auth = ref.getAuth();

var nubRef = new Firebase("https://xxxxx.firebaseio.com/Nubs");
var nubs = $firebaseArray(nubRef);
$scope.nubs = nubs;

var userRef = new Firebase("https://xxxxx.firebaseio.com/users");
var users = $firebaseArray(userRef);
$scope.users = users;

// Array of booleans for favorites
$scope.favedArray = [];

// Array of user ids for 
$scope.userIdArray = [];

var userFavs = $firebaseArray(userRef.child(auth.uid).child("favorites"));
$scope.userFavs = userFavs;

userFavs.$loaded()
.then
(
  function()
  {
    nubs.$loaded()
    .then
    (
      function()
      {
        $scope.tempFaved = [];
        $scope.tempId = [];
        console.log(userFavs);

        angular.forEach
        (
          nubs, 
          function(nub)
          {
            $scope.tempFaved.push(false);
            $scope.tempId.push(nub.$id);
            console.log($scope.tempId);

            angular.forEach
            (
              userFavs,
              function(favs)
              {
                console.log($scope.tempFaved);
                if(favs.nub == nub.$id)
                {
                  $scope.tempFaved.pop();
                  $scope.tempFaved.push(true);
                  console.log($scope.tempFaved);
                }
              }
            );
          }
        );

        while($scope.tempFaved.length > 0)
        {
          $scope.favedArray.push($scope.tempFaved.pop());
          $scope.userIdArray.push($scope.tempId.pop());
        }
            $scope.getFaved = function(nubId)
              {
                console.log($scope.favedArray[$scope.userIdArray.indexOf(nubId)]);
                $scope.faved = $scope.favedArray[$scope.userIdArray.indexOf(nubId)];
                return $scope.faved;
              }

            $scope.toggleFav = function(nub)
              {
                var nubFavRef = nubRef.child(nub.$id).child("favorites");
                var nubFavs = $firebaseArray(nubFavRef);
                var faved = $scope.getFaved(nub.$id)
                console.log(faved);
                if (faved == false)
                  {
                    nubFavs.$add
                    (
                      {
                        user: auth.uid
                      }
                    );
                    userFavs.$add
                    (
                      {
                        nub: nub.$id 
                      }
                    )
                  console.log("favorited");
                  }
                else 
                {
                  nubFavs.$remove(auth.uid);
                  userFavs.$remove(nub.$id);
                  console.log("unfavorited");
                }
              };
            }
          )
        }
      );

本质上，它循环遍历页面上显示的小点或帖子，并将它们与用户收藏的小点进行检查，以显示 FAVED 标签并切换收藏按钮的功能。如果用户没有收藏该小块，则该按钮会将小块添加到他们的收藏夹列表中，并将它们添加到收藏该小块的用户列表中，如果用户确实收藏了该帖子，它将删除它们。

toggleFav 的不受欢迎的功能也不起作用，因此也将不胜感激，但这是一个能够访问最喜欢的数组的正确子项的问题，我不确定该怎么做。

我认为当某个东西被收藏时页面需要更新正确的信息是某种 $on 监听器，但我不确定如何实现它。

Answer 1

/* How store data in fire base: 
{
	"home" : {
			"room1" : {	
					  "status" 		: "true",
					  "switch_name" : "light 2",
					  "user_id" 	: "-Kvbk-XHqluR-hB8l2Hh"
			}
	}
}
*/
//select element in which you want real time data.
const preObject = document.getElementById('tbl_switch_list');

//select your root table name
const dbRefObject = firebase.database().ref().child('home');

//Change Value in Firebase and view in your console.
dbRefObject.on('value',snap => console.log('Response : ',snap.val());

<h3>Switch List</h3>
<table id="tbl_switch_list" border="1">
    <thead>
				<tr>
						<td>#ID</td>
						<td>#switchName</td>
						<td>#status</td>
				</tr>
		<thead>
		<tbody id="list"></tbody>
</table>