please i need example passing parameters between pages framewor7, i have following:
$$(document).on(‘page:init’, ‘.page[data-name=“pageSend”]’, function (e) {
var username = $$(’#username’).val();
app.route.navigate(’/pageGet/?username=’+username);
})
$$(document).on(‘page:init’, ‘.page[data-name=“pageGet”]’, function (e) {
var page = e.detail.page;
console.log(page.query.username)
})
Hi,
you use f7-v2 right? or f7-vue ?
I cannot understand completely your question, (my native language is Spanish). Can you explain in more detail what you want to achieve?
Edit:
you can look how its done in framework7-template-single-view template
// here page-loader-component page gets 4 params, user, userId, posts, postId
{
path: '/page-loader-component/:user/:userId/:posts/:postId/',
componentUrl: './pages/page-loader-component.html',
},Hola muchas gracias y mejor aún que habla español, 
Estoy usando el template single de f7-v2, (https://framework7io.github.io/framework7-template-single-view/)
y mi pregunta es la siguiente:
Yo en el archivo app.js tengo lo siguiente:
// Dom7
var $$ = Dom7;
// Framework7 App main instance
var app = new Framework7({
root: ‘#app’, // App root element
id: ‘io.framework7.testapp’, // App bundle ID
name: ‘Framework7’, // App name
theme: ‘auto’, // Automatic theme detection
// App routes
routes: routes,
});
// Init/Create main view
var mainView = app.views.create(’.view-main’, {
url: ‘/’
});
$$(document).on(‘page:init’, ‘.page[data-name=“pageSend”]’, function (e) {
var username = $$(’#username’).val();
app.route.navigate(’/pageGet/?username=’+username);
})
$$(document).on(‘page:init’, ‘.page[data-name=“pageGet”]’, function (e) {
var page = e.detail.page;
console.log(page.query.username)
})
Mi pregunta es como se envian los datos que recupero en la variable username de la página pageSend al momento de hacer click para ir a la siguiente página y que la página pageGet los pueda recibir
en router.js tengo lo siguiente:
routes = [
{
path: ‘/’,
url: ‘./index.html’,
},
{
path: ‘/pageSend/’,
url: ‘./pages/pageSend.html’,
},
{
path: ‘/pageGet/’,
url: ‘./pages/pageGet.html’,
},
]
En el fondo me gustaría entender como es que este framework envía y pasa parametros entre sus páginas de una manera clara ya que me ha costado mucho encontrar un buen ejemplo que se entienda, yo vengo de trabajar de la manera tradicional con ajax y php,
Eso me gustaría entender si es posible que me orientes
Muchas Gracias po tu tiempo!
Ok,
programaticamente lo pude hacer asi:
primero definis en tu route.js (o como lo hayas llamado) la pagina que va a recibir un parametro.
// About page
{
path: '/about/',
url: './pages/about.html',
name: 'about',
},
// About page with params
{
path: '/aboutparams/:userName',
url: './pages/about-params.html',
name: 'about-param',
},
La pagina aboutparams va a recibir un parametro que se va a llamar userName. podes mandar la cantidad de parametros q necesites. solo agrega /:nombreParam
Y en app.js definis las funciones
$(document).on('page:afterin', '.page[data-name="about"]', function (e) {
// get username
var username = 'my-user-name'
app.router.navigate('/aboutparams/' + username);
})
$(document).on('page:init', '.page[data-name="about-param"]', function (e) {
alert(app.view.main.router.currentRoute.params.userName)
})
lo que te va a dar este resultado:
Ok muchas gracias, y mi última consulta es, como puedo mostrar ese valor de la variable obtenida en la página de la vista por ejemplo como lo hace javaScript document.write(variable) ?
lo mas prolijo seria usar componentes;
cambia tu routes.js
esto:
// About page with params
{
path: '/aboutparams/:userName',
url: './pages/about-params.html',
name: 'about-param',
},
por esto:
// About page with params
{
path: '/aboutparams/:userName',
componentUrl: './pages/about-params.html',
name: 'about-param',
},
y saca la funcion ya no la necesitas, ahora todo lo relacionado a la pagina lo haces desde la misma.
$(document).on('page:init', '.page[data-name="about-param"]', function (e) {
debugger
alert(app.view.main.router.currentRoute.params.userName)
})
y el layout de la pagina:
<template>
<div class="page" data-name="about-param">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">About Framework7 with params</div>
</div>
</div>
<div class="page-content">
<div class="block-title">Welcome to Framework7</div>
<div class="block block-strong">
<p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to. Framework7 is created by Vladimir Kharlampidi (iDangero.us).</p>
<p>The main approach of the Framework7 is to give you an opportunity to create iOS and Android (Material) apps with HTML, CSS and JavaScript easily and clear. Framework7 is full of freedom. It doesn't limit your imagination or offer ways of any solutions somehow. Framework7 gives you freedom!</p>
<p>Framework7 is not compatible with all platforms. It is focused only on iOS and Android (Material) to bring the best experience and simplicity.</p>
<p>Framework7 is definitely for you if you decide to build iOS and Android hybrid app (Cordova or PhoneGap) or web app that looks like and feels as great native iOS or Android (Material) apps.</p>
</div>
</div>
</div>
</template>
<script>
return {
data () {
return {
userName: this.$route.params.userName,
userData: null
}
},
on: {
pageInit: function (e, page) {
this.getUserData()
console.log('parametro desde pagian anterior: ' + this.userName)
}
},
methods: {
getUserData () {
// ej llamas a una api
app.request.json('https://api.dominio.com/userdata/' + this.userName, function (res){
console.log(res)
})
}
}
}
</script>
Muchas gracias, me ha servido ver tus ejemplos más especificos y claros para poder entender el funcionamiento del framework que ha primera instancia es muy complicado de entender sin ver ejemplos funcionales.
Puedo seguir realizandote más preguntas ? Gracias!
Si no hay problema. Lo que si, la proxima si podes escribir en ingles y español, asi si hay otro usario con una duda similar y no es de habla hispana puede entender tanto la pregunta como la respuesta.
Saludos.
Ok Thank I have one more question please, Do you have any example to use the function myApp.request.get(url, function(data){ console.log(data) }).
Explained me, I get json response of an Api Rest php but not show as string or text on page html (layout).
In the official page f7 I do not find any example full or more detail over that.
Thank!
Ok muchas gracias, una pregunta más ?, Tienes algún ejemplo de como usar la función myApp.request.get(url, function(data){ console.log(data) }).
Me explico, Obtengo un JSON de una API Rest en php pero no se muestra como string ó texto on la pagina html (vista o layout).
En la página oficial de f7 no encuentro algún ejemplo completo ó más detallado sobre eso.
Gracias!
what its not shown as string or text? in that json you have some data you whant to show? or you have custom html data? like <h1>my data from the api</h1>
Que es lo que no se ve como texto? en tu json, vos tenes datos que queres mostrar? o tenes un string con tags html ? como <h1>my data from the api</h1>
I have a response JSON example {“username”:“[email protected]”}, but only I want display value ([email protected]) in a html
Tengo una respuesta JSON ejemplo {“username”:“[email protected]”}, pero solo quiero mostrar el valor ([email protected]) en una etiqueta html
ok, just do like this:
<input type="text" id='userName' value='' disabled>
// where res is your JSON response data
$('#userName').val(res.username)
Ok thank, I have one more question please. How to I can send data including a file for example a .PDF, at my server remote “API Rest”, I have following code:
In my HTML:
Send DataIn my app.js:
var name = $$(’#name’).val();
var document = $$(’#document’).files[0];
var data = {
“name”: name,
“document”: document
};
app.request.post(‘myUrlApi’, data, function(data){
})
My question is how to send form data to server api, my api its ok but I don’t understand how f7 use their method, if is traditional form with Ajax or use its own syntax ?
Thank you!
Om gracias, Tengo una pregunta más por favor. Como puedo enviar datos incluido un archivo por ejemplo un .PDF, a my servidor remoto Api “Api Rest”, tengo el siguiente codigo:
En mi HTML:
Send DataEn mi app.js:
var name = $$(’#name’).val();
var document = $$(’#document’).files[0];
var data = {
“name”: name,
“document”: document
};
app.request.post(‘myUrlApi’, data, function(data){
})
Mi pregunta es como se envian los datos de un formulario al api, mi api esta ok pero no entiendo como f7 usa sus metodos, si es de la manera tradicional con Ajax o usa sus propias sintaxis?
Muchas gracias!
Hi good morning, I have a question and I need help you again please, how to can data insert from api to local array, this is my code that I have in a page template using component with Framework7:
<script>
return {
data () {
return {
userName: this.$route.params.userName,
userData: null,
data: []
}
},
on: {
pageInit: function (e, page) {
this.getUserData()
console.log('parametro desde pagian anterior: ' + this.userName)
}
},
methods: {
getUserData () {
// ej llamas a una api
app.request.json('https://api.dominio.com/userdata/' + this.userName, function (res){
console.log(res);
data.push(res.username);
})
}
}
}
</script>
Thank you!
Hola buenos días, tengo una pregunta y necesito ayuda otra vez, por favor, cómo puedo insertar datos desde una API a una matriz local, este es mi código que tengo en una plantilla de página que usa un componente con Framework7
<script>
return {
data () {
return {
userName: this.$route.params.userName,
userData: null,
data: []
}
},
on: {
pageInit: function (e, page) {
this.getUserData()
console.log('parametro desde pagian anterior: ' + this.userName)
}
},
methods: {
getUserData () {
// ej llamas a una api
app.request.json('https://api.dominio.com/userdata/' + this.userName, function (res){
console.log(res);
data.push(res.username);
})
}
}
}
</script>
Muchas Gracias !
Thank you, and other question please, how to finally I can display data to page, my code es: