Initialize Model elements in javascript/backbone - javascript

I am getting a nested JSON data from REST. Now I want to capture that value in a variable. Everything is working fine but I don't know how should I initialize that variable.
So here is my initialize method of Model.
initialize: function() {
var self = this;
if (!this.get('dropdownData')) {
this.set({
dropdownData: []
});
}
}
}
AJAX CALL:
fetchDropdown: function(data) {
var self = this;
var d = $.Deferred();
var dropdownRequest = $.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: this.urlRoot,
data: JSON.stringify(data)
});
dropdownRequest.done(function(data)
{
self.set({
dropdownData: data
});
console.log("JSON SUCCESS!! YAY!!");
d.resolve();
});
Now dropdownData should be initialized as dropdownData: {} or dropdownData: [] or I don't need to initialize it at all.
P.S: Logic wise code snippet is working. I just want to know what's the correct way to initialize the dropdownData in the initializefunction in BACKBONE MODEL

I would recommend avoiding initializing dropdownData in the initialize method entirely, instead utilizing model.defaults here. If you add the following to your model definition:
defaults: function () {
return {
dropdownData: []
};
},
...then you can remove all the code in the body of your initialize method. The result of this change will be that an instantiated model will either have the supplied value (at instantiation) for dropdownData or the model will default to the empty array specified.
Note that it's important to use the function version of defaults here. If you were to do this instead:
defaults: {
dropdownData: []
},
...then any instantiated model not supplied with a value for dropdownData would share a value for dropdownData. Every instance would refer to the exact same array.

Related

How can I provide dynamic values for an 'extend'? (or 'how does extend work in this case' ?)

I'm looking at a class (this one). The doco for it suggests you can extend the class to change a property of the class. That is true, it works for me.
However what I want to do is dynamically provide the values for the setting.
I've got two questions.
First
How can I adapt the demo so that I can dynamically supply the values used.
Second
I realise when I look at the class, this seems to be the significant part of the code ...
ajax (url, data = {}, method = this.method) {
const ajaxSettings = assign(
{},
{
contentType: false,
processData: false,
xhr: () => {
const xhr = $.ajaxSettings.xhr();
xhr.upload.onprogress = (event) => {
this.didProgress(event);
};
this.one('isAborting', () => xhr.abort());
return xhr;
},
url,
data,
method
},
get(this, 'ajaxSettings')
);
return this.ajaxPromise(ajaxSettings);
},
... I'm not confident that I understand how the 'extend' is doing what it's doing . ajaxSettings is used within the ajax function so how does the extend reach within the function and merge the value provided in the extend into the hardcoded values in the function ?
Hope the question makes sense ... I'll happily settle for an answer to 'First' if you can't manage 'Second' without writing a book ;-)
In response to comments
the extend is defined here https://api.emberjs.com/ember/3.8/functions/#ember%2Fobject/extend and
get is defined here https://api.emberjs.com/ember/3.8/functions/#ember%2Fobject/get .
It looks like you can simply make ajaxSettings a computed property if you want to set it dynamically:
import Uploader from 'ember-uploader/uploaders/uploader';
import { computed } from '#ember/object';
export default Uploader.extend({
ajaxSettings: computed('someProperty', function() {
// do your logic to set the options dynamically in here
return {
headers: {
'X-Application-Name': 'Uploader Test'
}
};
})
});
That indeed is where the ajaxSettings property is being used and the key line of code is this one:
get(this, 'ajaxSettings')
Which retrieves the ajaxSettings property from the class (thus, if ajaxSettings was set on the base class your subclass will override the base class settings -- see here for more info on extends).
That line is used in conjunction with Object.assign() (technically Ember's polyfill) to build the options. This part provides some defaults:
{
contentType: false,
processData: false,
xhr: () => {
const xhr = $.ajaxSettings.xhr();
xhr.upload.onprogress = (event) => {
this.didProgress(event);
};
this.one('isAborting', () => xhr.abort());
return xhr;
},
url,
data,
method
}
}
but since the retrieval of ajaxSettings occurs after the defaults, any properties specified in your class' ajaxSettings object which overlap with the above defaults will take precedence and override them.
So if you defined contentType in your class' ajaxSettings like so:
ajaxSettings: computed('someProperty', function() {
return {
contentType: true, // (or some other value besides false)
...
};
})
That would overlap with the contentType: false specified in the default values above and since it would get merged through assign() after the defaults, it would take precedence.

Not fetching correct url issue

I have a backboneJS app that has a router that looks
var StoreRouter = Backbone.Router.extend({
routes: {
'stores/add/' : 'add',
'stores/edit/:id': 'edit'
},
add: function(){
var addStoresView = new AddStoresView({
el: ".wrapper"
});
},
edit: function(id){
var editStoresView = new EditStoresView({
el: ".wrapper",
model: new Store({ id: id })
});
}
});
var storeRouter = new StoreRouter();
Backbone.history.start({ pushState: true, hashChange: false });
and a model that looks like:
var Store = Backbone.Model.extend({
urlRoot: "/stores/"
});
and then my view looks like:
var EditStoresView = Backbone.View.extend({
...
render: function() {
this.model.fetch({
success : function(model, response, options) {
this.$el.append ( JST['tmpl/' + "edit"] (model.toJSON()) );
}
});
}
I thought that urlRoot when fetched would call /stores/ID_HERE, but right now it doesn't call that, it just calls /stores/, but I'm not sure why and how to fix this?
In devTools, here is the url it's going for:
GET http://localhost/stores/
This might not be the answer since it depends on your real production code.
Normally the code you entered is supposed to work, and I even saw a comment saying that it works in a jsfiddle. A couple of reasons might affect the outcome:
In your code you changed the Backbone.Model.url() function. By default the url function is
url: function() {
var base =
_.result(this, 'urlRoot') ||
_.result(this.collection, 'url') ||
urlError();
if (this.isNew()) return base;
return base.replace(/([^\/])$/, '$1/') + encodeURIComponent(this.id);
},
This is the function to be used by Backbone to generate the URL for model.fetch();.
You added a custom idAttribute when you declared your Store Model to be like the one in your DB. For example your database has a different id than id itself, but in your code you still use new Model({ id: id }); when you really should use new Model({ customId: id });. What happens behind the scenes is that you see in the url() function it checks if the model isNew(). This function actually checks if the id is set, but if it is custom it checks for that:
isNew: function() {
return !this.has(this.idAttribute);
},
You messed up with Backbone.sync ... lots of things can be done with this I will not even start unless I want to make a paper on it. Maybe you followed a tutorial without knowing that it might affect some other code.
You called model.fetch() "a la" $.ajax style:
model.fetch({
data: objectHere,
url: yourUrlHere,
success: function () {},
error: function () {}
});
This overrides the awesomeness of the Backbone automation. (I think sync takes over from here, don't quote me on that).
Reference: Backbone annotated sourcecode

Backbone: how to load a Collection in the view (inc require)

I am trying to load data from an API into a view. However the data doesn't turn up in my view.
I tried getting the collection information in de router, as well as in the model.
However the date won't even console.log the data. Let alone that I can load the data into the view.
I am using require to load the JavaScript files. Can you have a look and see what I am doing wrong here?
I do see this console.log:
console.log("People Collection is initialized");
And I can also see the page loaded and the json. But not the console.log of the data in the url function... In fact I get this error in the console:
Error: A "url" property or function must be specified
In the Backbone Router:
var OF = OF || {};
OF.AdminRouter = Backbone.Router.extend({
routes: {
"users": "goToUsers",
"users/*other": "goToUsers"
},
goToUsers: function() {
require(['./models/users', './views/users_view', './views/menu_view', './collections/user_collection'], function(UsersMdl, UsersView, MenuView, UsersCollection) {
OF.usersView = new OF.UsersView;
OF.usersView.render();
});
}
});
The Collection:
var OF = OF || {};
OF.UsersCollection = Backbone.Collection.extend({
initialize: function() {
console.log("People Collection is initialized");
},
url: function() {
var that = this;
var sendObj = {
"admin": OF.login.attributes.admin,
"session": OF.login.attributes.session
};
$.ajax({
url: 'php/api/users/',
type: "POST",
dataType: "json",
data: sendObj,
success: function(data) {
console.log(data);
},
error: function(data) {
console.log("ERR: " + data);
}
});
},
model: OF.UsersMdl
});
The Model:
var OF = OF || {};
OF.UsersMdl = Backbone.Model.extend({
default: {
username: '',
homefoldersize: '',
email: ''
},
initialize: function(){
//on change functions can be done here
OF.usersCollection = new OF.UsersCollection();
OF.usersCollection.fetch();
},
result: {
success: false,
message: ''
},
validate: function(att) {
}
});
The View:
var OF = OF || {};
OF.UsersView = Backbone.View.extend({
el: '#content',
remove: function() {
this.$el.empty();
this.stopListening();
return this;
},
initialize: function() {
//set the new address variable.
OF.usersMdl = OF.usersMdl || new OF.UsersMdl();
},
render: function() {
/*
//first check if you are allowed to see this page
if (!OF.login || !OF.login.isValid()) {
OF.router.navigate('login', {trigger: true});
return;
}
*/
//save this in that
var that = this;
//when importing of login page (and fill it with info) is done
$.when(OF.template.get('users-usersField', function(data) {
var htmlSource = $(data).html();
var template = Handlebars.compile(htmlSource);
var compiled = template(OF.usersMdl.attributes);
//now place the page
that.$el.html(compiled);
//then start the menu
})).then(function(){
setTimeout(function(){
OF.menuView = new OF.MenuView;
OF.menuView.render();
}, 100);
});
$('#logout').show();
}
});
Thanks.
It seems to call the initialize of the collection twice and then continues to call the json function.
In your model's initialization you have
OF.usersCollection = new OF.UsersCollection();
OF.usersCollection.fetch();
But when you fetch your collection, it's going to initialize models for every result it gets back ... which will then trigger fresh collection fetches.
You don't need to create collections for your models inside your models, especially if the model is being created by the collection. Whenever you add a model to a collection (including when the collection creates the model after a fetch) the collection will associate itself with the model.
The general order of things should be:
You define a url function on your collection which returns the URL where you can get the (raw JSON) models of that collection.
You instantiate that collection, and then call fetch on the instance
The collection makes an AJAX call (which you can affect by overriding fetch or sync) and gets back the raw JSON for all of the models.
The collection instantiates new models for each result it gets back; those models are automatically added to the collection, and their .collection is automatically set to the collection.
Once OF.usersCollection.fetch().done(function() {... you can have your views start doing things, as your collection should now be all set.

How to get Model attributes from nested json object in Backbone

** JSON Data **
{
"data" : [{
"book" : "first book", -- > i want this via model.get('book');
"aurthor" : "xyz"
}
]
}
** Get json data using jquery Ajax. **
var jsonData = {};
$.ajax({
url : 'booklist.json',
async : false,
dataType : 'json',
success : function (json) {
jsonData = json.data;
}
});
** Model declaration here **
var MyModels = Backbone.Model.extend({
initialize : function () {},
defaults : {}
});
var modelinstance = new MyModels(jsonData);
modelinstance.get('book'); // it is giving undefined how can i get this value.
** Please help where i doing wrong.i am new in Backbone. **
If the data is always a single object wrapped up like that then you'd just add a parse method to your mode:
parse model.parse(response, options)
parse is called whenever a model's data is returned by the server, in fetch, and save. The function is passed the raw response object, and should return the attributes hash to be set on the model.
Something like this:
parse: function(response) {
return response.data[0];
}
You can also trigger a parse call through the model constructor using the parse: true option:
constructor / initialize new Model([attributes], [options])
[...]
If {parse: true} is passed as an option, the attributes will first be converted by parse before being set on the model.
So if you're manually loading the data through a $.ajax call then you'd have something like this:
success: function (json) {
var m = new MyModel(json, { parse: true });
// Do something with m...
}

Backbone - Declare Default Parameters for a Fetch inside a Model

I have some global parameters that I want to be sent in every time I call a fetch on a collection... my issue is I don't want to declare the data: { ... } every time I fetch.
Is there a way I can provide default parameters inside the Collection itself with the possibility to add more or override some?
For example:
Instead of doing this every time:
this.articlesCollection.fetch({
dataType: 'jsonp',
data: {
deviceType: GlobalVars.deviceType,
memberId: GlobalVars.memberId,
authToken: GlobalVars.authToken,
targetObjectId: userId,
limit: 50,
excludeArticleBodies: true,
excludeViewedItems: false
},
success: function() {
_this.render();
}
});
I'd like to just provide a one or two parameters and a success function, like this:
this.articlesCollection.fetch({
data: {
targetObjectId: userId
},
success: function() {
_this.render();
}
});
... and have the Collection look something like:
define([
'underscore',
'backbone',
'global',
'utilities',
'models/article/ArticleModel'
], function(_, Backbone, GlobalVars, Utils, ArticleModel){
var ArticlesCollection = Backbone.Collection.extend({
model: ArticleModel,
initialize : function(view) {
this.view = view;
},
dataType: 'jsonp',
data: {
deviceType: GlobalVars.deviceType,
memberId: GlobalVars.memberId,
authToken: GlobalVars.authToken,
limit: 50,
excludeArticleBodies: true,
excludeViewedItems: false
},
url : function() {
return GlobalVars.baseAPIUrl + '/API/GetArticles';
},
parse : function(data) {
return data.Articles;
}
});
return ArticlesCollection;
});
Here's a working jsFiddle with one approach: http://jsfiddle.net/LEuGq/1/
Basically, you configure both an object of defaultParams and params as properties of your collection, which are used to dynamically compute the correct URL when fetch() is called. This way is probably more in alignment with backbone than changing the API of fetch() to accept parameters, which it is not designed to do.
var ParamCollection = Backbone.Collection.extend({
defaultParams: {deviceType: 'raceCar', limit: 42},
params: {},
url: function() {
return "/paramcollection?" + $.param(_.defaults(this.params, this.defaultParams));
}
});
var paramCollection = new ParamCollection();
paramCollection.params.excludeArticleBodies = true;
paramCollection.params.limit = 52;
$("#debug").append(paramCollection.url());
Backbone uses jQuery's ajax call by default, so you can set up anything you need as a default using various methods. See this question for some examples: jQuery's ajaxSetup - I would like to add default data for GET requests only

Categories