javascript - 我是否正确绑定(bind)了 AngularFire(Angular+FireBase)？

Question

大家好，我正在尝试将 Angular 和 Firebase 一起尝试一些很酷的 3 路绑定(bind)操作，但我遇到了一些绑定(bind)问题。我真的不知道对象($scope 和 $firebase)在绑定(bind)在一起之前应该是什么样子。现在，如果我通过 firebase 进行更改，我几乎可以立即看到 DOM 中的更改，但我需要能够从 DOM 到 FB 进行一些增删改查，以实现一些真正的 3 路绑定(bind)。也许我这样做是完全错误的。 :/

这是我所拥有的:

html(这会根据我的 $scope.myGrid 创建一个由 400 个正方形组成的巨大网格，它是引用 $firebase 对象的 $scope 对象)

<div class="square" ng-repeat="(position, hex) in myGrid" style="background-color:{{hex}}" ng-click="squareClick({{position}})">

我的 Controller (匿名 fxn 创建我的 $scope.myGrid 对象。)

$scope.paletteColor = "#f00";


    //FIREBASE
    var ref = new Firebase("https://MyAPP.firebaseio.com/");
    //angularfire ref to the data
    var sync = $firebase(ref);
    //download the data into a local object
    var syncObject = sync.$asObject();
    console.log(syncObject); // firebase object is composed of root node with 400 child nodes with key:value like 01-01:"#f00", 01-02: "#ff0" which is exactly how my $scope.myGrid object looks like
    $scope.myGrid = syncObject;

// binding Part taken from the docs which is a huge mystery to me.
//        syncObject.bindTo($scope, "myGrid").then(function(){
//            console.log($scope.myGrid);
//            $scope.myGrid. = "baz";
//            ref.$set({foo:"baz"});
//        });

Answer 1

您确实需要使用注释中列出的syncObject.bindTo 语法。这将设置三向绑定(bind)。请参阅以下官方文档中的注释:

While 3-way bindings can be extremely convenient, be careful of trying to use them against deeply nested tree structures. Stick to practical uses like synchronizing key-value pairs.

如果您需要比基本键值对更多的功能，您可能需要考虑扩展 Firebase 工厂。您可以在 https://www.firebase.com/docs/web/libraries/angular/guide.html#section-extending-factories 的文档中找到它。 .