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.
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);
}
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've created a Rails app using Backbone, but I've run into a small but annoying problem. When a user goes to his profile and then back to the frontpage the frontpage is empty and I have to refresh it in order to show the content of the backbone view.
In my Movieseat.Routers.Movieseats I have:
routes:
'': 'index'
initialize: ->
#movieSeats = new Movieseat.Collections.Movieseats()
#movieSeats.fetch()
#searchResults = new Movieseat.Collections.Moviesearch()
index: ->
view = new Movieseat.Views.MovieseatsIndex(collection: #movieSeats)
$('#container').html(view.render().el)
Any idea on why users have to refresh to see the frontpage?
I don't know CoffeeScript but the fetch() method takes a success callback where you can ensure the collection has loaded. In your index you're creating a new view passing the #movieSeats collection but the collection may have not been loaded by that time. Try the following:
{
routes: {
'': 'index'
},
initialize: function() {
this.movieSeats = new Movieseat.Collections.Movieseats();
},
index: function() {
var self = this, view;
this.movieSeats.fetch({
success: function(collection) {
view = new Movieseat.Views.MovieseatsIndex({ collection: collection })
$('#container').html(view.render().el)
}
});
}
}
However, you might want to "bootstrap" your collection like is shown on the Backbone docs: http://documentcloud.github.io/backbone/#FAQ-bootstrap
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);
},
...