在 Firebase 数组中移动项目

Question

我一直在使用 firebase API，但遇到了一些困难。

问题是我试图在数组中向上或向下移动一个项目，但似乎无法弄清楚如何在 Firebase API 中执行此操作。

这是我的控制器

angular.module('aceTrainingApp')
  .controller('AdminController',['$scope','FirebaseService', function ($scope, FirebaseService) {

    $scope.posts = FirebaseService.getPosts();
    $scope.localPosts = $scope.posts; //is this Right??
    $scope.newPost = {name: '', body: ''};

        $scope.remove = function (id) {
            FirebaseService.removePost(id);
        };

        $scope.updatePost = function (id) {
            FirebaseService.updatePost(id);
            $scope.newPost = {name: '', body: ''};
        };

        $scope.addPost = function() {
            FirebaseService.addPost(angular.copy($scope.newPost));
        };

//only trying to get moveDown working first
//            $scope.moveUp = function(post) {
//            var crntPos = $scope.posts.indexOf(post);
//           if (crntPos > 0) {
//                $scope.posts.splice(crntPos, 1);
//                $scope.posts.splice(crntPos - 1, 0, post);
//            }
//        };

    $scope.moveDown = function(post) {
        var crntPos = $scope.localPosts.indexOf(post);
        if (crntPos < $scope.localPosts.length) {
            $scope.localPosts.splice(crntPos, 1);
            $scope.localPosts.splice(crntPos + 1, 0, post);
            FirebaseService.updateAllPosts($scope.localPosts);
        }
    };
  }]);

这里是服务

angular.module('aceTrainingApp').factory('FirebaseService', [ '$firebase', function($firebase){

var ref = new Firebase('https://acetrainingsolutions.firebaseio.com/');
var posts = $firebase(ref).$asArray();

var getPosts = function(){
    return posts;
};

var removePost = function(id){
    posts.$remove(id);
};

var updatePost = function(post){
    posts.$save(post);
};



var addPost = function(index){
    posts.$add(index);
};

return {
    getPosts: getPosts,
    removePost: removePost,
    updatePost: updatePost,
    addPost: addPost
};
}]);

HTML

    <li ng-repeat="post in localPosts track by $index">
        <input type="text" ng-model="post.name" ng-blur="updatePost($index)">
        <input type="text" ng-model="post.body" ng-blur="updatePost($index)">
        <button type="button" class="close space" ng-click="moveDown(post)">&DownArrow;</button>
        <button type="button" class="close space" ng-click="moveUp(post)">&UpArrow;</button>
        <button type="button" class="close space" ng-click="remove($index)">&times;</button>
    </li>

问题在于 splice 方法仅适用于 Firebase 文档中提到的视图。有人可以帮我修复 moveUp 和 moveDown 功能吗？

干杯

Answer 1

事实证明，因为我的数组包含键包含“$”的对象，更新方法不起作用。更新方法也不正确。

Firebase 服务

    var updatePost = function(id){
    posts.$save(id);
};

var updateAllPosts = function(posts){
    ref.set(posts);
};

管理员控制器

        $scope.moveDown = function(post) {
        var localPosts = [];
        var crntPos = $scope.posts.indexOf(post);
        if (crntPos < $scope.posts.length) {
            $scope.posts.splice(crntPos, 1);
            $scope.posts.splice(crntPos + 1, 0, post);

            for(var i = 0; i < $scope.posts.length; i++){
                var obj = {
                    name: $scope.posts[i].name,
                    body: $scope.posts[i].body
                };
                localPosts.push(obj);
            }
            FirebaseService.updateAllPosts(localPosts);
        }
    };

Answer 2

我假设您已阅读文档并在此处看到有用的博客文章： https://www.firebase.com/docs/web/guide/understanding-data.html#section-arrays-in-firebase https://www.firebase.com/blog/2014-04-28-best-practices-arrays-in-firebase.html

由于您不必担心多个客户端同时写入数据，因此这让生活变得更轻松。

我相信 Firebase 的好人可以改进这个答案，但我的建议是在客户端管理事情，然后在适当的时间将整个数组写回 Firebase（无论是在更改还是在用户点击保存取决于您）。 Firebase 将检测到它是您正在编写的数组，并将索引添加为键，其中 0 是第一个，1 秒等等。这样你就可以维持秩序。

保留您的 Firebase 帖子

$scope.posts = FirebaseService.getPosts();

还有一个本地帖子数组，然后您可以将其写回 Firebase

$scope.localPosts = [];

然后使用 Splice 等处理 localPosts。

准备就绪后，将localPosts 写回 Firebase。这种方法对我有用，但我不确定这是否是一个很好的建议，如果 Firebase 自己说这是“不可以”，我会提前向你道歉