I have a messageBox in my Durandal app and whether you click no or yes you are sent throw to an other page. I want to do this with the router, but the pages aren't switched.
I can see the code is executing the line but nothing happens!
define(function(require) {
var app = require('durandal/app'),
system = require('durandal/system'),
router = require('durandal/plugins/router');
return {
router: router,
displayName: 'SometingApp Startpage',
activate: function() {
system.log("Application started!");
},
createEstimate: function() {
app.showMessage('Do you want to create a new something?', 'New something', ['Yes', 'No']).then(function(result) {
if (result == "Yes") {
return router.activate('otherpage');
}
});
}
};
});
THe user click a button that is bind to createEstimate!
Hope someone can help!
I think that what you need to do is call router.navigateTo('#/yourUrl').
If i understand right the documentation, router.activate must be call only one time, usually at the shell activation.
The route functions available for your viewModel navigation is listed in the documentation
http://durandaljs.com/documentation/Router/ under the section "Other APIs"
Related
I am developing a hybrid mobile app with Framework7. I finished the user interface successfully and now I want to add functionality to my app. My problem is the navigation from one .html to another.
At the user interface i did the navigation with links, like this:
LOGIN
Because of some checks I removed the whole href-tag and here I come to the problem, how can i do this linking in jQuery?
I tried a lot, also followed the public "Router JavaScript API" (https://v1.framework7.io/docs/router-api.html) but nothing worked well (NOTE: this is not my whole code, just the affected parts):
Attempt 1
var myApp = new Framework7 ({});
var mainView = myApp.views.add('.view-main');
var app = {
init: function () {
events.doClickFunctions();
},
login: {
success: function () {
//here should be the linking done
mainView.router.load('/homepage/');
}
}
};
Problem: "myApp.views.add is not a function"
Attempt 2
var myApp = new Framework7 ({});
var mainView = myApp.addView('.view-main');
var app = {
init: function () {
events.doClickFunctions();
},
login: {
success: function () {
//here should be the linking done
mainView.router.load('/homepage/');
}
}
};
Problem: "myApp.addView is not a function"
And i tried some other combinations, but nothing worked.
Furthermore, I made a workaround: If the checks are successful, the href attribute will be added with jQuery and a virtual click is made on the element. So the user experience is like i want it to, but I guess thats not how it is supposed to work?
Thank you in advance!
try this
var app = new Framework7({
id: 'io.framework7.testapp',
precompileTemplates: true, //
template7Pages: true,
root: '#app',
theme: theme,
cache: false ,/* disable caching */
data: function () {
},
methods: {
helloWorld: function () {
app.dialog.alert('Hello World!');
},
},
routes: routes,
vi: {
placementId: 'pltd4o7ibb9rc653x14',
}
});
app.views.main.router.navigate('/login/');
for routing to another Page in jq use this :
app.views.main.router.navigate('/login/');
My router.js file is like this:
this.route('cards', function() {
this.route('all');
this.route('card', {path: '/:card_id'}, function() {
this.route('edit');
});
this.route('new');
});
In all.js, I've:
model() {
return this.store.findAll('card');
}
In cards.js, I've:
beforeModel() {
this.transitionTo('cards.all');
},
model() {
return this.store.findAll('card');
}
As you can see that I'm making 2 requests which, IMO, is not necessary. So, if I remove the call from cards.js, the new.js doesn't work properly.
When I create a new card from new.js, after creation, it should go to /cards/1 and show the proper data. But, when I remove that line from cards.js, after creation of a card, it goes to /cards/1 but the data is not saved.
Link to repo: https://github.com/ghoshnirmalya/hub-client
I've inherited a Cordova/PhoneGap app running Cordova 3.4. My first task was to implement a Client-Side Routing framework to make it easier to navigate between pages. I chose Flatiron Director as my client-side router, but when I went to implement it I started to get weird functionality out of the app.
My first router setup:
var routing = {
testHandler: function(){
console.log('Route ran');
},
routes: function(){
return {
"/testhandler": testHandler
}
}
};
console.log('Routes added');
The routes are added (at least based on the console output). When I attempt to hit the /testhandler hash, I receive a "Failed to load resource: file:///testhandler" error when I set window.location.hash to "/testhandler". I noticed the "Route ran" statement was never printed.
My next attempt was just using the hashchange event with jQuery.
$(window).on('hashchange', function(){ console.log('Ran'); });
On this attempt, regardless of what I change the hash to, I see the 'Ran' output, but I still receive the "Failed to load resource: " error.
Is this a problem with PhoneGap/Cordova? Or our implementation? Is it just not possible to use client-side routing with Cordova? What am I doing wrong?
I know that this doesn't answer your question directly but you may consider making your own provisional router. This may help you to debug your app and to figure out what's the problem.
Something like this for example:
var router = (function (routes) {
var onRouteChange = function () {
// removes hash from the route
var route = location.hash.slice(1);
if (route in routes) {
routes[route]();
} else {
console.log('Route not defined');
}
};
window.addEventListener('hashchange', onRouteChange, false);
return {
addRoute: function (hashRoute, callback) {
routes[hashRoute] = callback;
},
removeRoute: function (hashRoute) {
delete routes[hashRoute];
}
};
})({
route1: function () {
console.log('Route 1');
document.getElementById('view').innerHTML = '<div><h1>Route 1</h1><p>Para 1</p><p>Para 2</p></div>';
},
route2: function () {
console.log('Route 2');
document.getElementById('view').innerHTML = '<div><h1>Route 1</h1><p>Para 1</p><p>Para 2</p></div>';
}
});
I'm going through examples with routing from David Sulc's book Backbone.Marionette.js: A Gentle Introduction
https://leanpub.com/marionette-gentle-introduction
ContactManager.navigate = function (route, options) {
options || (options = {});
Backbone.history.navigate(route, options);
};
ContactManager.getCurrentRoute = function () {
return Backbone.history.fragment;
};
ContactManager.on("initialize:after", function () {
if (Backbone.history) {
Backbone.history.start();
if (this.getCurrentRoute() === "") {
ContactManager.trigger("contacts:list");
}
}
As you can see if the history fragment is empty, it will trigger the contacts:list event which will render the list of contacts. However, it doesn't redirect at all, and I've found out that fragment is preset to "contacts" somehow, so the event doesn't get fired at all. It also happened to me once that initially the fragment was empty and got everything rendered, and url changed properly, but upon refresh fragment was still "contacts" and again nothing was rendered.
ContactsApp.Router = Marionette.AppRouter.extend({
AppRoutes: {
"contacts": "listContacts"
}
});
ContactManager.on("contacts:list", function () {
ContactManager.navigate("contacts");
API.listContacts();
});
This is the code that handles the event. What seems to be the problem? Thanks.
I think there is some missing code. I would expect to find something like this in the router:
var myController = {
listContacts: function () {
ContactManager.trigger("contacts:list");
}
};
ContactsApp.Router = Marionette.AppRouter.extend({
controller: myController,
appRoutes: {
"contacts": "listContacts"
}
});
Note that appRoutes starts with a lowercase a.
Now the route contacts will call the controller's listContacts method and trigger the ContactManager.on("contacts:list"... callback, running the appropriate API method.
What I Have
Trying to understand what's going on and how to control it. I have a "public" view for users that have not yet been authenticated, and a "home" view for users that are authenticated. Here's my route config:
app.start().then(function() {
//Replace 'viewmodels' in the moduleId with 'views' to locate the view.
//Look for partial views in a 'views' folder in the root.
viewLocator.useConvention();
//configure routing
router.useConvention();
router.mapRoute('home', 'viewmodels/home', 'Test App', true);
router.mapRoute('public', 'viewmodels/public', 'Test App', true);
router.mapRoute('set/:id', 'viewmodels/set', 'Set');
router.mapRoute('folder/:id', 'viewmodels/folder', 'Folder');
router.mapRoute('api', 'viewmodels/api', 'API Reference');
router.mapRoute('error', 'viewmodels/error', 'Error', false);
app.adaptToDevice();
//Show the app by setting the root view model for our application with a transition.
if (dataservice.isAuthenticated() === true) {
app.setRoot('viewmodels/shell', 'entrance');
router.navigateTo('home');
} else {
app.setRoot('viewmodels/public');
router.navigateTo('#/public');
}
router.handleInvalidRoute = function (route, params) {
logger.logError('No route found', route, 'main', true);
router.navigateTo('#/error');
};
});
The Problems
When I run the app for the first time, I'm not authenticated, and I get an error:
Uncaught TypeError: Cannot call method 'lookupRoute' of undefined
Originating from the 'router.navigateTo('#/public');' line.
Then when I try to click the login button, I get the same error from this:
define(['durandal/app', 'durandal/plugins/router', 'services/dataservice'], function (app, router, dataservice) {
var publicViewModel = function () {
self.logIn = function () {
app.setRoot('viewmodels/shell');
router.navigateTo('#/home');
};
But the content loads correctly. When I navigate to a particular page by clicking, say to /folder/2, and then change the url to /folders/2 (invalid), I get "route not found" in my log, as expected, but I run into a few other issues:
I don't get the error page, or any errors (as I think I should, per my handleInvalidRoute)
If I click on something else, the url doesn't change, and new content isn't loaded, again with no errors.
I think I'm breaking routing somehow, but I'm not sure how. How can I correct the above issues?
Screen:
I suspect calling navigateTo where you are might be too soon for some reason. To test this theory try move this code.
if (dataservice.isAuthenticated() === true) {
app.setRoot('viewmodels/shell', 'entrance');
router.navigateTo('home');
} else {
app.setRoot('viewmodels/public');
router.navigateTo('#/public');
}
into an "activate" method on your publicviewmodel, and in the main.js just leave this:
app.setRoot('viewmodels/public');
EDIT: Old suggestion
I believe on your viewmodel for the root you need a router property. So modify your public viewmodel to add one:
define(['durandal/app', 'durandal/plugins/router', 'services/dataservice'], function (app, router, dataservice) {
var publicViewModel = function () {
self.router = router;
self.logIn = function () {
app.setRoot('viewmodels/shell');
router.navigateTo('#/home');
};
(where do you define self though?)