I am just starting with Framework7 and I want to navigate to another page when a click a paragraph. I tried a few things and googled for the past hour but no luck.
Here is the code I have in my-app.js:
var $$ = Dom7;
var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'My App',
// App id
id: 'com.myapp.test',
// Enable swipe panel
panel: {
swipe: 'left',
},
view : {
stackPages: true
},
// Add default routes
routes: [
{
name: 'about',
path: '/about/',
url: 'about.html',
},
{
name: 'index',
path: '/index/',
url: 'index.html'
},
{
name: 'preview',
path: '/preview/',
url: './preview.html'
},
],
// ... other parameters
});
var mainView = app.views.create('.view-main');
$$('p').on('click', function(){
mainView.router.navigate('/preview/');
});
When I click a paragraph nothing happens and there are no errors when I run the inspector.
What am I doing wrong?
Thank you.
You can do that by using this:
self.app.router.navigate('/preview/', {reloadCurrent: true});
Also make sure that html layout like this:
<div class="view">
<!-- Initial Page, "data-name" contains page name -->
<div data-name="preview" class="page">
<!-- Scrollable page content -->
<div class="page-content">
preview page content
</div>
</div>
</div>
Update 1: In F7 ver 4 you can use this:
app.views.main.router.navigate('/login/', {reloadCurrent: true});
app.mainView.router.navigate('/preview/')
Try this if the answer #Anis offered but its supposed to work that answer
It should work using : app.router.navigate('/preview/')
To go some specific routes you can use
app.views.main.router.navigate('your route');
If you have a scenario like after create some task and you have to redirect to listing page, where if you use
if(formSubmitSuccessfull){
app.views.main.router.navigate('your router')
}
It will redirect to the previous page (In this case form create) after redirect to the listing page, When you try to back to the dashboard or other page from listing
In this case you have to use
app.views.main.router.back({
url: '/your router where you want to go.../',
force: true,
ignoreCache: true
})
Related
I have a Vue project, but there is a issue to me,
In my router.js:
{
path: '/home/aftersale_physicalserver_workpanel/:use_flag/:areapartition_homeshowtext',
meta: { keepAlive: true },
icon: 'compose',
name: 'aftersale_physicalserver_workpanel',
title: 'work panel',
component: resolve => {
require(['./views/main_home/home/components/general_admin_staff_panel/physicalserver/physicalserver_workpanel.vue'], resolve);
}
},
there is the code:
...
<template>
<lml-page
ref="lml_page_ref"
v-if=" origin_data && origin_data.count"
:data_count="origin_data.count"
:current.sync="cur_page"
#change_page_for_parent="server_change_page">
</lml-page>
</template>
...
<script>
export default {
props: {
...
cur_page: 1,
},
</script>
you see the cur_page is the page number. I want the URL append the page number.
because when I enter a detail page, when I go back, there will go to page 1 by default.
My purpose
my purpose is let the list_page remember some params. such as the upper page_number, and some search params. but in Vue I don't know how.
When I from a searched params page enter a detail page, when I go back:
<span class="go-left" #click="$router.go(-1)">
<Icon type="chevron-left"></Icon>
<span>Go back</span>
</span>
there will get a list_page without the searched data.
You would need to use either local storage or a central state, what I use is vuex like this:
onPageChange: function (pageNo) {
this.$store.dispatch(this.$mts.some.SOMETHING, pageNo);
},
Then you can call your store wherever you need and get the page number.
Look for the vuex docs on how to setup state management.
Like this:
this.page = this.$store.getters.some.page
I'm new to framework7 and i'm creating a new page in my framework7 app. I want to be able to add a certain javascript code like this <script type="text/javascript" src="sample.js"></script> into a new page html file using framework7 . For example this is my new page which consists of just a "try" button.
<template>
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">{{title}}</div>
</div>
</div>
<div class="page-content">
<button class="sample">try</button>
</div>
</div>
</template>
<script type="text/javascript" src="Exp.js"></script>
So in the new page as you can see I've added <script type="text/javascript" src="Exp.js"></script> which is a javascript file named Exp.js which looks like this
\\ "try" button event listener
document.querySelector('.sample').addEventListener("click", function () {
alert(works);
});
So what it does is Whenever i click the "try" button in the page , it should alert "works", but this does not work.
Is there any way that i can add javascript files like this? or is not possible in framework7 to add javascript files like that? please do help me with an answer
And this is my framework7 app initialize js file.
var myApp = new Framework7({
// App root element
root: '#app',
// App Name
name: 'My App',
// App id
id: 'com.myapp.test',
// Enable swipe panel
panel: {
swipe: 'left',
},
// Add default routes
routes: [
{
path: '/about/',
url: 'about.html',
},
{
path: '/Expenses/',
componentUrl: 'Expenses.html',
},
],
// ... other parameters
});
// Add view
var mainView = myApp.views.create('.view-main', {
// Because we want to use dynamic navbar, we need to enable it for this view:
stackPages: true,
});
Ok, your question is now clearer. See the component page below for the Expense.html file. This is the "more official" way of doing things in Framework7. It may be a little new, depending on what your javascript background is. You have a component file that has the html template, javascript functions and data.
The script part is where you define data and methods to be used in your component page. I have created a function called alertWorks which basically does what you were trying to do. Then I have called that function using the "#click" notation on the button. This is how I have added my event handler to the click event of the button. I have also gone a little step further to create some data for the title variable that you used at the top of the page. This is just basic bare bones, but should help to introduce you to F7.
<template>
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">{{title}}</div>
</div>
</div>
<div class="page-content">
<button class="sample" #click="alertWorks">try 1</button>
</div>
</div>
</template>
<script>
return {
data: function () {
return {title: "Button Page"};
},
methods: {
alertWorks(e) {
alert('works');
},
}
}
</script>
And then your router would look something like this
routes: [
{
path: '/about/',
url: 'about.html',
},
{
path: '/Expenses/',
componentUrl: 'Expenses.html',
},
],
See the docs explanation here.
When using Iron Router with Meteor.js 0.8.3, how can I have a text in a view template that changes depending on which route the user is on?
For example, if a user is at /profile, the text would be User Profile and if he is at / the text will be Home.
header.html
<template name="header">
<h1>{{ routeTitle }}</h1>
</template>
profile.html
<template name="profile">
{{> header}}
</template>
router.js
Router.map( function() {
this.route('index', {
path: '/',
template: 'index'
})
this.route('profile', {
path: '/profile/:_id',
template: 'profile',
data: function() { return Users.findOne(this.params._id); }
})
})
I personally store my own properties in the route options like this :
Router.map(function(){
this.route("index", {
// iron-router standard properties
path: "/",
// custom properties
title: "Home"
//
controller: "IndexController"
});
this.route("profile", {
path: "/profile/:_id",
title: "User profile",
controller: "ProfileController"
});
});
Then I extend the Router with a set of utilities functions to access the current route.
_.extend(Router,{
currentRoute:function(){
return this.current()?this.current().route:"";
}
});
UI.registerHelper("currentRoute",Router.currentRoute.bind(Router));
Using these utilities, you can call Router.currentRoute() in JS which happens to be a reactive data source too, as it acts as a wrapper for Router.current().
Use Router.currentRoute() && Router.currentRoute().options.title to check whether there is a current route and fetch the title you declared in the route definition.
In templates you can use {{currentRoute.options.title}} to fetch the current title, this is helpful when working with iron-router layouts.
If you want to get more specific you can even mimic the Router.path and pathFor helper behavior :
_.extend(Router,{
title:function(routeName){
return this.routes[routeName] && this.routes[routeName].options.title;
}
});
UI.registerHelper("titleFor",Router.title.bind(Router));
Now you can call Router.title("index") in JS and {{titleFor "index"}} in templates.
You can even get as far as having a dedicated helper for the current route title, as you suggested in your question :
UI.registerHelper("currentRouteTitle",function(){
return Router.currentRoute() && Router.currentRoute().options.title;
});
You can achieve this very easily with data param of the path:
Router.map(function() {
this.route('...', {
...
data: function() {
return {
importantText: 'User Profile',
};
},
});
});
Now use it as any other data object in your rendered template, layout template, or any of the templates rendered to named area:
{{importantText}}
I am trying to figure out how to properly use createChildRouter. After going in circles for a day and a half trying to find code that will give me some results, I have settled for the moment on the following code (which still doesn't give me results):
shell.js
var routes = [
{ route: '', moduleId: 'home', title: 'Home', nav: 1 },
{ route: 'inventory/*index', moduleId: 'inventory/inventory', title: 'Inventory', nav: 2 }];
return router.makeRelative({ moduleId: 'viewmodels' }) // router will look here for viewmodels by convention
.map(routes) // Map the routes
.buildNavigationModel() // Finds all nav routes and readies them
.activate(); // Activate the router
inventory.js
define(['services/logger', 'plugins/router'], function (logger, router) {
var title = 'Details';
var childRouter = router.createChildRouter()
.makeRelative({
moduleId: 'viewmodels/inventory',
fromParent: true
}).map([
{ route: 'index', moduleId: 'inventory', title: 'Inventory', nav: 3 },
{ route: 'inventory', moduleId: 'items', title: 'Items', nav: 4 }])
.buildNavigationModel();
var vm = {
router: childRouter,
activate: activate,
title: title
};
return vm;
//#region Internal Methods
function activate() {
logger.log(title + ' View Activated', null, title, true);
}
//#endregion
});
My tree structure looks like this:
Because of my failure to get any results, I'm starting to suspect that it's not my routing code that is the problem, but rather my navigation menu or perception of how/whether child routers are supposed to appear and be visible without additional work. I'm using a plain vanilla template (hot towel) and the only thing I've changed is the logging code in router.js because I'm trying to figure out what the router code is looking for. The result I get from the above code (with my modified logging) is as follows when I click on the button to switch from my "Home" view to my "Inventory" view:
LOG: /^$/ != inventory/*index
LOG: /^inventory\/(.*?)$/ == inventory/*index
LOG: Activating[object Object]
LOG: [Details] Details View Activated
LOG: Navigation Complete[object Object][object Object]
LOG: /^index$/ != *index
LOG: /^inventory$/ != *index
LOG: Route '*index' Not Found
So my questions are, is this what the routing code is supposed to do? Is it supposed to fail to match the splat route with any of the child routes? Do I need to do something to make navigation buttons for the child routes appear? Were they supposed to appear automatically? My view does switch to inventory.js/html, but no new navigation buttons appear when this happens.
What am I missing?
Check out knockout samples for a working implementation of child routes. Child routes will NOT be added to the primary navigation if that's what you're expecting. They are intended to be used with a secondary navigation. The HTML version can be seen live at http://dfiddle.github.io/dFiddle-2.0/#knockout-samples.
I am using Durandal for a very simple website. In all of my browser tabs the page title is coming up with "undefined|" appended to the front of the application's title. Where is Durandal getting and setting that value?
pthalacker
Ultimately Durandal's router plugin is setting the document.title.
https://github.com/dFiddle/dFiddle-1.2/blob/gh-pages/App/durandal/plugins/router.js#L254
onNavigationComplete: function (routeInfo, params, module) {
if (app.title) {
document.title = routeInfo.caption + " | " + app.title;
} else {
document.title = routeInfo.caption;
}
},...
Typically Durandal is able to construct a missing caption propterty on the route object, so maybe there's something different in the way the routes are set up.
https://github.com/dFiddle/dFiddle-1.2/blob/gh-pages/App/samples/shell.js#L6
router.map([
{ url: 'hello', moduleId: 'samples/hello/index', name: 'Hello World', visible: true },
{ url: 'hello/:name', moduleId: 'samples/hello/index', name: 'Examples' },...
]);
You can set the page title when the viewmodel gets activated:
activate: function (params) {
// Setting page title
params.routeInfo.caption = "My Page Title";
return true;
}
Replacing page titles in Durandal 2.1.0
(if you want to the page title to be something distinct from the last level of the route)
Slight modification to RainerAtSpirit's answer: Specify 'title' in the route instead of 'name'.
router.map([
{ url: 'hello', moduleId: 'samples/hello/index', title: 'Hello World', visible: true },
{ url: 'hello/:name', moduleId: 'samples/hello/index', title: 'Examples' },...
]);