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();
},
Related
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);
}
could you please tell me how to navigate from one page to another page in backbone .
I want to show second html on button click how it is possible
I so like that .I resister event like that
events: {
'click #click':'moveTonext'
},
moveTonext: function(){
alert('---')
},
I make second page like that
define([
'jquery',
'underscore',
'backbone',
'text!templates/second.html'
], function ($, _, Backbone, statsTemplate) {
'use strict';
var secondView = Backbone.View.extend({
// Instead of generating a new element, bind to the existing skeleton of
// the App already present in the HTML.
el: '#todoapp',
// Compile our stats template
template: _.template(statsTemplate),
// Delegated events for creating new items, and clearing completed ones.
events: {
},
// At initialization we bind to the relevant events on the `Todos`
// collection, when items are added or changed. Kick things off by
// loading any preexisting todos that might be saved in *localStorage*.
initialize: function () {
this.render();
},
serialize: function () {
return {
message: 'world'
};
},
// Re-rendering the App just means refreshing the statistics -- the rest
// of the app doesn't change.
render: function () {
this.$el.html(this.template());
}
// Add a single todo item to the list by creating a view for it, and
// appending its element to the `<ul>`.
});
return secondView;
})
Second html
<h1>second</h1>
here is my plunker
http://plnkr.co/edit/fCXwSrroJP1l6BppjpmD?p=preview
Basically your button should trigger navigation, so the click handler should look like this:
moveToNext: function () {
router.navigate("other/path", { trigger: true });
}
Then, in your router code you need to add a route handler for the above path:
routes: {
"other/path": "handleOtherPath"
},
handleOtherPath: function () {
new SecondView();
}
This is for the case when SecondView should replace FirstView. If it should be appended instead, the following mechanism can be used:
moveToNext: function () {
new SecondView({ el: this.$(secondViewContainerSelector) });
}
Here's a working Plunker sample.
I'm using require.js, jquerymobile, backbone and handlebars.
I have a cordova multi-view app.
When I change view in my app, i fire the event with:
Backbone.history.navigate("page", {trigger: true});
In my router page, I have kinda:
routes: {
"page": "page",
},
initialize: function () {
this.currentView = undefined;
var page;
page = new Login();
this.changePage(page);
},
page: function () {
var myview = new View({});
this.changePage(myview );
},
changePage: function (page) {
if(this.currentView) {
this.currentView.remove();
this.currentView.off();
}
this.currentView = page;
page.render();
}
When i change page, the template is loaded but it is like jquerymobile style is lost.
JQM is included the first time in my main.js file, after the require.config, where I launch the router.
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()
});
In the Backbone.js documentation, in the entry for the Router.routes method, it is stated
When the visitor presses the back button, or enters a URL, and a particular route is matched,
the name of the action will be fired as an event, so that other objects can listen to the router,
and be notified.
I have attempted to implement this in this relatively simple example:
The relevant JS:
$(document).ready(function(){
// Thing model
window.Thing = Backbone.Model.extend({
defaults: {
text: 'THIS IS A THING'
}
});
// An individual Thing's View
window.ThingView = Backbone.View.extend({
el: '#thing',
initialize: function() {
this.on('route:showThing', this.anything);
},
anything: function() {
console.log("THIS DOESN'T WORK! WHY?");
},
render: function() {
$(this.el).html(_.template($('#thing-template').html(), {
text: this.model.get('text')
}));
return this;
}
});
// The Router for our App
window.ThingRouter = Backbone.Router.extend({
routes: {
"thing": "showThing"
},
showThing: function() {
console.log('THIS WORKS!');
}
});
// Modified from the code here (from Tim Branyen's boilerplate)
// http://stackoverflow.com/questions/9328513/backbone-js-and-pushstate
window.initializeRouter = function (router, root) {
Backbone.history.start({ pushState: true, root: root });
$(document).on('click', 'a:not([data-bypass])', function (evt) {
var href = $(this).attr('href');
var protocol = this.protocol + '//';
if (href.slice(protocol.length) !== protocol) {
evt.preventDefault();
router.navigate(href, true);
}
});
return router;
}
var myThingView = new ThingView({ model: new Thing() });
myThingView.render();
var myRouter = window.initializeRouter(new ThingRouter(), '/my/path/');
});
The relevant HTML:
<div id="thing"></div>
<!-- Thing Template -->
<script type="text/template" id="thing-template">
<a class='task' href="thing"><%= text %></a>
</script>
However, the router event referenced in the View's initialize function does not seem to get picked up (everything else works--I'm successfully calling the "showThing" method defined in the Router).
I believe I must have some misconception about what the documentation intended by this statement. Therefore, what I'm looking for in a response is: I'd love to have someone revise my code so that it works via a Router event getting picked up by the View, or, clearly explain what the Router documentation I listed above intends us to do, ideally with an alternative code sample (or using mine, modified).
Many thanks in advance for any assistance you can provide!
This is beacuse you are binding a listener to the wrong object. Try this in your View :
window.ThingView = Backbone.View.extend({
initialize: function() {
myRouter.on('route:showThing', this.anything);
},
...