Backbone save with LocalStorage with fetched DB data?

140 Views Asked by At

UPDATE

Ok, so I am still getting into the world of Backbone. But I have an issue with adding in localStorage into the Model.

So this is sorta off working, but I do not know what is going on?

var Model = Backbone.Model.extend({
    //localStorage: new Backbone.LocalStorage("SomeCollection"),
    url: "/GetMyData",
    defaults: {
        "id": "",
        "datatest1": "",
        "test2": ""
    }
});

var NewTest = new Model();
NewTest.fetch();

console.log ( NewTest ); //This as DB data
console.log ( NewTest.attributes ); //This is empty

How can the 'attributes' on the 1st console.log contain db data and then the second one be completely empty? The 1st console.log is also empty, if I uncomment the localStorage, so I am guesting I doing something wrong?


Ok, I am not sure what I am doing wrong, but I am using Backbone and on a fetch call, save that id using the LocalStorage plugin. Now I have the fetch call and LocalStorage working apart but can not get them working together.

So my LocalStorage Code

var Model = Backbone.Model.extend({
    localStorage: new Backbone.LocalStorage("SomeCollection"),
    defaults: {
        "id": "",
        "datatest1": "",
        "test2": ""
    }
});

var NewTest2 = new Model();

NewTest2.set({
    "id": "99",
    "datatest1": "TEST-1-Q22",
    "test2": "TEST-2-CL22"
});

NewTest2.save();

So this works, no problems with that. Now I add in a collection, and fetch data form my database. So my fetch code, with collection

var Model = Backbone.Model.extend({
    defaults: {
        "id": "",
        "datatest1": "",
        "test2": ""
    }
});

var Col = Backbone.Collection.extend({
    model: Model,
    url: "/GetMyData"
});

var NewTest3 = new Col();

NewTest3.fetch();

console.log( NewTest3 );

I should also say that I am using PHP Slim as the base. The /GetMyData path gets the data from a MySQL database via a PDO connection, which I then convert into a JSON object for Backbone.

Which I assume is good, as that all works, the console.log's list of attributes displays the right data form my DB.

Now when I put the two together, I can not seem to get it to work.

var Model = Backbone.Model.extend({
    defaults: {
        "id": "",
        "datatest1": "",
        "test2": ""
    }
});

var Col = Backbone.Collection.extend({
    localStorage: new Backbone.LocalStorage("SomeCollection2"),
    model: Model,
    url: "/GetMyData"
});

var NewTest4 = new Col();
NewTest4.fetch();

console.log( NewTest4.save() );

This console.log returns, Uncaught TypeError: undefined is not a function. So I am not sure why? When I set the data in my 1st test, it works fine. Now I have also tried moving the localStorge var into the model but with the same effect.

The main aim for doing this is so I can log all the data coming from the server. When I set a few different data tests, I very much like the way in which this plugin saved the data.

Thanks.

*Please note, I am dyslexic, so I may not have explained myself right, please tell me if there is anything I can re-word to explain myself better. Thank you for your understanding.

0

There are 0 best solutions below