Scenario
I am making app using backbonejs, requirejs and jquery. I am retrieving data from remote server. Once the data is fetched, then I want to display it to the user.
Problem
First I fetch data inside app.js file then I make a instance of MoviesView and pass collection in to this view. Inside MoviesView, I have initialize function and inside this function I am listening to an Event triggered by router. Once that event is listened then it should call renderAll function. The problem lies here, it does not invoke renderAll function at all.
My code
here is function where I am fetching data from the server
fetchBoxOfficeMovies: function () {
var movieCollection = new MoviesCollection;
movieCollection.fetch({success: this.successCallback, error: this.errorCallback}).then(function () {
//console.log(movieCollection.toJSON());
new MoviesView({ collection: movieCollection });
});
},
successCallback: function () {
console.log('successCallback');
},
Here is the router where I am triggering an event
routes: {
'': 'index'
},
index: function () {
App.Vent.trigger('init');
console.log('router');
}
And here is initialize and renderAll functions inside MoviesView
initialize: function () {
App.Vent.on('init', this.renderAll, this);
console.log('movies view');
},
renderAll: function () {
console.log('renderAll');
},
Output which I see in my console
Here is what I see in my console
router
successCallback
movies view
As you can see I do not see renderAll in my console.
Question
Why don't I see renderAll and how can I fix this?
UPDATE
Here is my entire App view
var App = Backbone.View.extend({
el: 'body',
initialize: function () {
App.router = new MainRouter();
Backbone.history.start();
this.fetchBoxOfficeMovies();
},
fetchBoxOfficeMovies: function () {
var movieCollection = new MoviesCollection;
movieCollection.fetch({success: this.successCallback, error: this.errorCallback}).then(function () {
//console.log(movieCollection.toJSON());
new MoviesView({ collection: movieCollection });
});
},
successCallback: function () {
console.log('successCallback');
},
errorCallback: function () {
console.log('errorCallback');
}
});
As it can be seen that I am making new instance of MainRouter before calling fetchBoxOfficeMovies, which means I am triggering event before everything else.
As DCoder said, you got the order wrong. Rename your console.log to understand better what's happening.
router -> I trigger a 'init' event
successCallback -> successCallback
movies view -> I start listening 'init' events NOW
Suggested 'Fix':
movieCollection.fetch({
success: this.successCallback,
error: this.errorCallback
}).then(function () {
//console.log(movieCollection.toJSON());
var moviesView = new MoviesView({ collection: movieCollection });
moviesView.renderAll()
});
Related
I want to show a preloader over all the contents when a page is loading and hide it when the page load is finished and show the content (I'm not talking about internal links- like when you type an address in the browser and waiting for the page to load.)
Like this demo: https://demo.app-framework.com/
I’ve tried this:
var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'My App',
// App id
id: 'com.myapp.test',
on: {
init: function () {
console.log('App initialized');
},
pageInit: function () {
console.log('Page initialized');
app.preloader.hide();
},
}
// ... other parameters
});
var mainView = app.views.create('.view-main');
app.preloader.show();
But it doesn't work it shows the loader like other elements and doesn't hide it, I'm not sure if its something possible. I would appreciate if someone can point me in the right direction.
That's because in the pageInit event you are referring to a variable which is not initialised by the time you are calling (var app), please find the code snippet usefull.
var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'My App',
// App id
id: 'com.myapp.test',
on: {
init: function () {
console.log('App initialized');
},
pageInit: function () {
console.log('Page initialized');
//app.preloader.hide(); //app is not yet initialized this will return an undefined error.
},
}
// ... other parameters
});
var mainView = app.views.create('.view-main');
app.preloader.show(); //var app is initialized by now
app.on('pageInit', function (page) {
console.log('Page is now initialized');
app.preloader.hide();
});
The docs on Page has a section on Page Events. https://framework7.io/docs/page.html#page-name
Use app.preloader.show(); on an early event, and use app.preloader.hide(); when you want it removed.
pageBeforeIn: function (e, page) {
app.preloader.show();
},
pageAfterIn: function (e, page) {
app.preloader.hide();
},
I'm building a little CRUD app in Backbone, and I'm stuck a little with a need to redirect from one view to another. My app consists of a layout view, in which other views are rendered, and a router. Here it is:
var router = Backbone.Router.extend({
routes: {
'': 'home',
'resumes/:id': 'showResume'
},
home: function () {
// renders a index view with my collection
this.layout.render(new ResumeList({collection: resumes});
},
showResume: function () {
if (!this.fullResume) {
this.fullResume = new FullResume({model: new Resume()});
}
// allowing to navigate via url with model id
this.fullResume.model.set('id', id).fetch({
context: this,
success: function () {
this.layout.render(this.fullResume);
}
});
}
});
Then, in my FullResume view I've got a delete event, which destroys the model. Here it goes:
var FullResume = Backbone.View.extend({
// tagName and other stuff
events: {
// other events
'click #delete': 'deleteResume'
},
// initialize, render and other functions
deleteResume: function () {
this.model.destroy({
success: function (res) {
console.log('DELETE model' + res.toJSON().id);
},
error: function () {
console.log('Failed to DELETE');
}
});
}
});
The function above works perfectly and deletes the model, but after deleting the model it still remains on it's view until I navigate somewhere manually. I read a bit and tried to manage how to render the main view after this event or redirecting to it, but didn't succeed a much.
You are looking for the http://backbonejs.org/#Router-navigate function with the trigger option set to true.
Here's an example: http://jsfiddle.net/x3t7u5p0/
Clicking on "Home" or "About" links will change the view, however I've added a delayed programmatic view change, when the About view renders, it will switch back to Home after the delay
render: function () {
this.$el.html(this.template);
_.delay(function() {
appRouter.navigate('home', {trigger: true});
}, 500);
}
I have a backbone view that has a single click event to update a collection. In my console, I can see the object being updated and the number of models being returned is changing, however the view stays static after the event is fired for the first time and any second attempt to fire it gives me the error TypeError: text is undefined. For reference, I have my script loading at the bottom of the page and the template (using underscore) is above it.
Here's my view
app.MyView = Backbone.View.extend({
el: 'body',
events: {
'click #submit': 'fetchData'
},
initialize: function() {
this.collection = new app.MyCollection();
// On my first attempt, I tried having a the render tied to the sync event when the view initiated, although the sync event doesn't actually occur until something is clicked
// this.collection.on('sync', this.render, this);
},
render: function() {
console.log('rendering');
var schedule = $('#schedule');
var template = _.template($('#times-template').html());
schedule.html(template({ collection: this.collection.toJSON() }));
},
fetchData: function() {
that = this;
stationQuery.station_start = $('#start').val();
stationQuery.station_end = $('#end').val();
var query = stationQuery;
this.collection.fetch({
data: query,
success: function(collection, response) {
console.log('fetching data');
console.log(collection);
// attempt #2 - moving the sync event to the success callback of fetch doesnt allow the view to update a second time either
// collection.on('sync', that.render, that);
},
error: function(collection, response) {
console.log('error on fetch', response);
}
});
},
});
app.myView = new app.MyView;
// Third attempt, this time checking if listenTo will allow the view to update every time the event is fired. It still only works on the first time and fails to render for consecutive clicks, even though the console is showing updated models
app.myView.listenTo(app.myView.collection, 'sync', app.myView.render);
Below is a working code, I just added initial call to fetch data at the end
app.myView.fetchData();
And uncommented your .on('sync', ... inside initialize
this.collection.on('sync', this.render, this);
I tested it with jsbin so you can see what's was wrong for you. As a result I see initial rendering of fetched data and clicking the #submit will re-fetch and re-render view.
app.MyView = Backbone.View.extend({
el: 'body',
events: {
'click #submit': 'fetchData'
},
initialize: function() {
this.collection = new app.MyCollection();
// Here is a binding to each fetch data and on success render view
this.collection.on('sync', this.render, this);
},
render: function() {
console.log('rendering');
var schedule = $('#schedule');
var template = _.template($('#times-template').html());
schedule.html(template({ collection: this.collection.toJSON() }));
},
fetchData: function() {
that = this;
var stationQuery = {};
stationQuery.station_start = $('#start').val();
stationQuery.station_end = $('#end').val();
var query = stationQuery;
this.collection.fetch({
data: query,
success: function(collection, response) {
console.log('fetching data');
},
error: function(collection, response) {
console.log('error on fetch', response);
}
});
},
});
app.myView = new app.MyView;
// Here is first call to fetch data and on success render view
app.myView.fetchData();
I am working on javascript backbone project. I declared a global object like follow
window.App = { Vent: _.extend({}, Backbone.Events) }
I did above in initialize function like following
initialize: function () {
window.App = { Vent: _.extend({}, Backbone.Events), hello: 'yes' };
console.log(App); // This is ONE. see explanation below for ONE
console.log(App.Vent); // This is TWO. see explanation below
}
ONE
This log line shows following
function (){return parent.apply(this,arguments)} app.js:22
TWO
This log line show
undefined
Also if I do console.log(App.hello) it still says undefined
Please help me what am I doing wrong in this code?
Update
Here is all the related code to my problem. I am using requirejs and backbone
here is my main.js
require(['domReady', 'views/app', 'jqm'], function (domReady, AppView) {
domReady(function () {
window.App = { Vent: _.extend({}, Backbone.Events) };
new AppView();
});
});
here is views/app.js file
define(['backbone', 'views/home/homes', 'collections/homes'], function (Backbone, HomesView, HomesCollection ) {
var App = Backbone.View.extend({
el: 'div#page',
events: {
'swipeleft': 'nextView',
'swiperight': 'preView'
},
nextView: function (e) {
console.log(App.Vent);
//App.Vent.trigger('changeView', { direction: 'next' });
},
preView: function (e) {
console.log(App.Vent);
//App.Vent.trigger('changeView', { direction: 'prev' });
}
});
return App;
});
What I am doing in this file is when user swipes left or right then it calls nextView and preView functions. In these functions I want to trigger and Event which I listen to them in another view. But right now I want to console it. But it says undefined
Try to change:
var App = Backbone.View.extend({
to something else. Like this:
var iApp = Backbone.View.extend({
I want updatePlays function to be called as a callback function when an AJAX call is successful. I thought that using underscore bind would let me refer 'this' as the Collection object that I actually want to update, but I'm having trouble here. When I get to the function that should update collection, it thinks that 'this' refers to 'window'.
In this situation, a Backbone Model has Backbone Collection, which are made from another backbone models.
in view:
SomeView: Backbone.View.extend({
someFunction: function(e) {
var field = this
this.picker = new PlayPicker({
field:field,
model: new PlaySet({
plays: new Collections.Plays({}),
slot: field.model
})
})
}
})
PlayPicker:Backbone.View.extend({
...
refresh: function () {
this.model.update()
},
....
Collection that's part of model PlaySet
Plays:Backbone.Collection.extend({
model: Play ,
initialize: function () {
plays = this
_.bind(this.updatePlays, plays) // Where I thought I should bind
},
updatePlays: function (plays) {
new_plays = []
var i;
for (i = 0; i < plays.length; i++){
new_plays.push(new Play({
id: plays[i]["id"],
text: plays[i]["text"]
}));
}
this.reset(new_plays) // Uncaught TypeError: Object [object Window] has no method 'reset'
}
})
Model PlaySet
PlaySet: Backbone.Model.extend({
update: function() {
this.get('slot').fetchAssociatedPlays(this.get('plays').updatePlays)
},
})
Model Slot - does the AJAX call
Slot:Backbone.Model.extend({
...
fetchAssociatedPlays: function(update) {
thisModel = this
$.ajax({
url: thisModel.associatedPlaysURL(),
success: function (collection) {
update(collection)
}
})
}})
Should this be achievable with underscore bind, and where/how would be the correct way?
Thank you in advance.
The answer to this question has helped me fix my issue:
Binding a callback in Backbone.js and Underscore.js
callBack = _.bind(callBack, this);
It was that I need to use a function that is the result of binding the first function with some object.