EzDev.org

backbonefire

backbonefire - Backbone bindings for Firebase Backbone.js + Firebase • TodoMVC


Firebase Backfire: model.set() does not sync to Firebase

I'm new to Backbone and Firebase. I'm using Backfire, have a collection:

var UsersCollection = Backbone.Firebase.Collection.extend({
    model: UserModel,
    firebase: new Firebase( "https://xxxxxx.firebaseio.com/users" ),
});

The model itself is not tied to Firebase (was getting "Invalid Firebase reference created" error):

var UserModel = Backbone.Model.extend({
    defaults: function() {
        return {
            email: "example@example.com"
        };
    }
});

In my View, I instantiate the collection, and I get the data okay, and I can add new models to the collection, as follows:

this.allUsers  = new UsersCollection();
...
this.allUsers.add( userData );

Works great, new user records appear on Firebase. However, let's say I now want to grab a given user's model and update its data:

var userRecord = this.allUsers.findWhere( {email: email} );
userRecord.set( {age: age} );

This updates the model locally but the changed model is NOT getting synced to Firebase. I tried userRecord.save(); afterwards but it triggers a "circular reference" error. Per the docs, set() should do it bur clearly something is off :(


Source: (StackOverflow)

Does BackboneFire support non-AutoSync collection with AutoSync model

Basically I want this set up:

var Game = Backbone.Model.extend({
    defaults: {
    },
    autoSync: true
});

var Games = Backbone.Firebase.Collection.extend({
    url: 'https://<myapp>.firebaseio.com/games',
    autoSync: false,
    model: Game
});

Each Game should be auto-synced with server data but I do not not want to listen to the entire child_* Firebase family of events. The goal is to update individual item view instead of repainting the whole list.

Kind regards to folks out there and happy coding ;)


Source: (StackOverflow)

how to display fetch data form firebase in backbone?

I am learning backbone.js. I am using firebase for API. I can't able to display data. Can anyone help me please?

I follow instruction mention on https://github.com/firebase/backbonefire.

var realtimeList = new RealtimeList();
realtimeList.on('sync', function(collection) {
  console.log('collection is loaded ', collection);
//  todoView.render();
});

Collection is object.

DEMO


Source: (StackOverflow)

Firebase & Backbone: Trouble using uid as a key

I created logins and unique todo lists per user using Firebase and TodoMVC as proof of concept for another project. I'm using Firebase and Google to log users in and when things are working, they get a unique persistent todo list.

Everything works (I think) when the user is already logged into Google via their browser.

The problem happens when they aren't. Instead of their todo list, or a blank one under their user id, they see the todo list of an undefined user until they hit refresh, then things work again. The Firebase url doesn't see their uid until they hit refresh. If you're logged in to Google, you can replicate the error by opening an incognito window.

You can see the errors in my code at http://lacyjpr.github.io/todo-backbone, and my repo at https://github.com/lacyjpr/todo-backbone

This is my authentication code:

 // Authenticate with Google
 var ref = new Firebase(<firebase url>);
  ref.onAuth(function(authData) {
    if (authData) {
      console.log("Authenticated successfully");
    } else {
      // Try to authenticate with Google via OAuth redirection
      ref.authWithOAuthRedirect("google", function(error, authData) {
        if (error) {
          console.log("Login Failed!", error);
        }
      });
    }
  })

// Create a callback which logs the current auth state
function authDataCallback(authData) {
  if (authData) {
    console.log("User " + authData.uid + " is logged in with " +               authData.provider);
  uid = authData.uid;
} else {
  console.log("User is logged out");
 }
}

This is the code that gets the UID to use as a firebase key:

// Get the uid of the user so we can save data on a per user basis
var ref = new Firebase(<firebase url>);
var authData = ref.getAuth();

if (authData) {
  var uid = authData.uid;
  console.log(uid);
}

// The collection of todos is backed by firebase instead of localstorage
var TodoList = Backbone.Firebase.Collection.extend({

// Reference to this collection's model.
model: app.Todo,

// Save all of the todos to firebase
url: <firebase url> + uid,

Thanks in advance for any advice you can offer!


Source: (StackOverflow)

Firebase and Backbone

I am trying to build a basic app using Backbone and Firebase:

http://jsfiddle.net/C9wew/6324/

var counter = 0;

var Box = Backbone.Firebase.Model.extend({
    defaults: {
        number: 0
    },
    //firebase: new Firebase('https://backbone-firebase.firebaseio.com/box')
});

var BoxList = Backbone.Firebase.Collection.extend({
    model: Box,
    firebase: new Firebase('https://backbone-firebase.firebaseio.com/')
});

var Boxes = new BoxList;

var AddBox = Backbone.View.extend({
    el: $('#addBox'),
    events: {
        "click" : 'addBox'
    },
    addBox: function () {
        console.log("adding box");
        Boxes.add({
            number: counter
        });
        counter = counter+1;
    }
});

var addBox = new AddBox();

Error stack trace:

Uncaught TypeError: undefined is not a function backfire.min.js:1

b.Firebase.Collection.b.Collection.extend.constructor backfire.min.js:1
d backbone-min.js:27
(anonymous function) (index):56
jQuery.event.dispatch jquery-git2.js:4397
elemData.handle jquery-git2.js:4076

Uncaught TypeError: Cannot assign to read only property 'id' of 1 backfire.min.js:1
a.extend._childAdded backfire.min.js:1
(anonymous function) firebase.js:93
ic firebase.js:43
Wd firebase.js:93
Ud.Jb firebase.js:93
Xd.Jb firebase.js:94
(anonymous function) firebase.js:109
(anonymous function) firebase.js:59
cc firebase.js:55
R firebase.js:59
(anonymous function) firebase.js:109
Sa firebase.js:23xe firebase.js:109
W firebase.js:109
h.hc firebase.js:117
h.gc firebase.js:85
dd.gc firebase.js:76
(anonymous function) firebase.js:74
Lc firebase.js:58
W.onmessage firebase.js:57

The problem is, I am getting a lot of weird errors with Firebase. I have read that weird bugs exist in Firefox, but now I am using Chrome and getting different errors.


Source: (StackOverflow)

How to use Firebase Backfire with Browserify?

I'm trying to set up a project using Firebase's Backfire (for Backbone) with Browserify/Gulp but running into issues. I did npm install firebase and npm install backfire, then in my Models.js module I'm trying..

// ...
var Firebase = require('firebase'),
    Backfire = require('backfire');

module.exports = {
    // ...
    ItemsCollection: Backbone.Firebase.Collection.extend({
      model: ItemModel,
      firebase: new Firebase(FIREBASE_URL + 'items')
    })
  };

Unfortunately, the Firebase property in 'Backbone.Firebase' errors out as undefined..

I located some posts about a npm "shim" called "client-backfire", however, it seems it's been unpublished/deprecated. Any ideas how to get it to work?


Source: (StackOverflow)

How do I change the Firebase URL in a backbone.js application

I'm creating a backbone application that is divided into months. In my firebase the month is the parent node, and under that I have key\value pairs that I need.

What I can't figure out is how to change the month and trigger everything updating. eg if I hardcode my url it's something like

https://blinding-fire-XXXX.firebaseio.com/Application/Month1

which is fine for getting data for Month1 , but how should I update my application to get data for Month2?

I'm assuming I should be able to use the base url (without Month1) and some sort of filter, but I just can't figure it out.

I have tried , 'restarting' the app when the user selects a different Month and this works the first time a month is shown, but if they return to a previously selected month , I get an empty list.

Hoping someone can point me in the right direction!


Source: (StackOverflow)

Ckeditor helper error in bonefire framework

I tried to integrate ck editor for my project. But it show some error massages. I can't config those errors. Controller public function ckeditor()

   $this->load->helper('ckeditor_helper');
 //print_r($this->load->helper('ckeditor_helper'));

    //Ckeditor's configuration
    $data['ckeditor'] = array(

        //ID of the textarea that will be replaced
        'id'    =>  'content',
        'path'  =>  './assets/js/ckeditor',

        //Optionnal values
        'config' => array(
            'toolbar'   =>  "Full",     //Using the Full toolbar
            'width'     =>  "550px",    //Setting a custom width
            'height'    =>  '100px',    //Setting a custom height

        ),

        //Replacing styles from the "Styles tool"
        'styles' => array(

            //Creating a new style named "style 1"
            'style 1' => array (
                'name'      =>  'Blue Title',
                'element'   =>  'h2',
                'styles' => array(
                    'color'     =>  'Blue',
                    'font-weight'   =>  'bold'
                )
            ),

            //Creating a new style named "style 2"
            'style 2' => array (
                'name'  =>  'Red Title',
                'element'   =>  'h2',
                'styles' => array(
                    'color'         =>  'Red',
                    'font-weight'       =>  'bold',
                    'text-decoration'   =>  'underline'
                )
            )               
        )

    );

    $data['ckeditor_2'] = array(

        //ID of the textarea that will be replaced
        'id'    =>  'content_2',
        'path'  =>  './assets/js/ckeditor',

        //Optionnal values
        'config' => array(
            'width'     =>  "550px",    //Setting a custom width
            'height'    =>  '100px',    //Setting a custom height
            'toolbar'   =>  array(  //Setting a custom toolbar
                array('Bold', 'Italic'),
                array('Underline', 'Strike', 'FontSize'),
                array('Smiley'),
                '/'
            )
        ),

        //Replacing styles from the "Styles tool"
        'styles' => array(

            //Creating a new style named "style 1"
            'style 3' => array (
                'name'      =>  'Green Title',
                'element'   =>  'h3',
                'styles' => array(
                    'color'     =>  'Green',
                    'font-weight'   =>  'bold'
                )
            )

        )
    );      
   // Template::set('toolbar_title', 'Create New Event');
    Template::set_view('sport_events/ckeditor');
    Template::set('ckeditor',$data);
    Template::render();

}

Views ckeditor.php(This is my view page.just i call ckeditor.js and pass controller function array to views)

 <script type="text/javascript" src="/asset/ckeditor/ckeditor.js"></script>
 <script type="text/javascript" src="/asset/ckfinder/ckfinder.js"></script>

 <?php 
 echo '<pre>';
 print_r($ckeditor);
 echo '</pre>';
  ?>       
 <textarea name="content" id="contents" ><p>Example data</p></textarea>
 <?php echo display_ckeditor($ckeditor); ?>
<textarea name="content_2" id="content_2" ><p>Example data</p></textarea>
<?php echo display_ckeditor($ckeditor_2); ?>

enter image description here


Source: (StackOverflow)

How to delete model from backbone collection using Firebase

I have a collection from which I would like to delete a model and have it sync in real-time:

var ClientCollection = Backbone.Firebase.Collection.extend({
  model: Client,
  url: "https://<my-firebase-url>.firebaseio.com",
  autoSync: true
});

I have tried the following from the collection veiw using my clear function:

var ClientView = Backbone.View.extend({
  tagName:  "li",
  className: "list-group-item",
  template: _.template("<%= name %>"),
  events: {
    "click .destroy" : "clear"
  },
  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  },
  clear: function() {
      this.model.remove();
  },
});

However this only removes the model from the DOM.

How do I delete the model from the server AND the DOM?


Source: (StackOverflow)