CODEWITHSUNDEEP
firebaseangularfire
Jimothey
Jimothey

Reputation: 2434

Firebase/angularFire - Should I still use $add when using 3 way data binding?

I have the following code in an Angular app that uses AngularFire/Firebase:

FirebaseBooks.$bind($scope, "books");

Firebase books being a service returning me a firebase object

Then to add a new book I would normally (before setting up 3 way data binding) do

$scope.books.$add({
    name: $scope.bookName,
    isbn: $scope.bookIsbn,
    thumbnail: $scope.bookThumbnail,
    publishedDate: $scope.bookPublishedDate,
    description: $scope.bookDescription
  })

Is this still the best way now I'm wanting to use 3 way binding or should I use some other method, the docs seem to suggest I no longer need $add? If I don't what should I use to get the above into $scope.books in a firebase friendly way?

Forgive me if this is a stupid question!

Thanks in advance

Upvotes: 0

Views: 208

Answers (2)

Christian Bonato
Christian Bonato

Reputation: 1306

I've found that binding is not mandatory.

Using :

<script src="https://cdn.firebase.com/js/client/1.0.6/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>


You could do :

app.factory('FirebaseBooks', ['$firebase', function($firebase) 
{ 
    var firebase_base_url = "xxxx.firebaseIO.com/books";

    return {
            getBookRef: function(bookID,childName)
            {
                fb_url = firebase_base_url+'/'+bookID;
                var firebaseRef = new Firebase(fb_url);
                return $firebase(firebaseRef);
            }
        };
}]);


and then :

$scope.bookRef = firebaseService.getBookRef(bookID); // MAY OR MAY NOT BE ALREADY POPULATED 

    $scope.bookRef.$on('loaded', function(snapshot) 
    {
        // IF FIREBASE REF IS EMPTY, POPULATE IT
        if(snapshot === null) 
        {
            $scope.bookRef.$set(
                {
                   name: $scope.bookName,
                   isbn: $scope.bookIsbn,
                   thumbnail: $scope.bookThumbnail,
                   publishedDate: $scope.bookPublishedDate,
                   description: $scope.bookDescription
                }).then(function(ref) 
            {
                // DO WHAT THOU WILST WITH YOUR PROMISE BEING FULFILLED
            });
        } 
        // --- EOF - IF FIREBASE REF IS EMPTY, POPULATE IT
        else 
        {
            // console.log('snapshot seems to be already populated');
        }
        console.log('---> snapshot : ');
        console.log(snapshot);
    });


Once $scope.firebaseRef is 3-way binded, you can just manipulate the $scope.firebaseRef, which is a JS object, in your controller's functions, and then just use .$save(). You may have a function that deletes a child entry using $child(), for example. Let's say you bind this 'addAuthorfromUI' function to a submit button in your UI : 

$scope.addAuthorfromUI = function(bookID) // ASSUMING NG-MODEL 'bookID' IS PASSED
    {
     $scope.bookRef.author = $scope.author; // ASSUMING NG-MODEL 'author' IN TEMPLATE
     $scope.bookRef.$save(); // YOU JUST APPENDED STUFF TO THE OBJECT, NOW SAVE IT TO FB
     }


Not sure why $bind() is not needed, it may be because of the versions I use, this is why I specified the APIs versions.

Upvotes: 1

Kato
Kato

Reputation: 40582

You can just add items directly into the bound object and they will be sent to the server. To obtain a unique, chronological ID, you could still use $add, or you could obtain one directly from Firebase, too:

var ref = new Firebase(URL);
var data = $firebase(ref);
data.$bind( $scope, 'books' );

$scope.addToBooks = function(title) {
   var uniqueId = ref.push().name();
   $scope.books[uniqueId] = title;
};

Upvotes: 1

Related Questions