Display data attributes in other pages other than index.html

1

Hello guys i want to display the data values in my app.js in other pages other than the index.html page.

APP.JS

data: function () {
    return {
      globalSettings:{
        apiUrl: "http://localhost:8000",
      },
    };
  },

i want to display the apiUrl value in the form action in pages/user/user-signup.html

<form action="{{ app.data.globalSettings.apiUrl }}/user-signup@processing" method="POST" class="form-ajax-submit">

This is url value it return.

http://localhost:8080/%7B%7B%20app.data.globalSettings.apiUrl%20%7D%7D/user-signup@processing

Instead of this

http://localhost:8000/user-signup@processing

2

Those pages must be loaded as template or component to make templates work there

3

How can i load the pages as a template or a component?

4

By specifying it correctly in routes https://framework7.io/docs/routes.html

5

This my route

 {
    path: '/user-signup/',
    url: './pages/user/user-signup.html',
 },

What do i add to make it a template or component?

6

You should change url: to templateUrl:

This can be found in the docs, on the link posted above :slight_smile:

7

I changed it an it did not work.

user-signup.html

<div class="page" data-name="user-signup">
  <div class="page-content">
    <div class="block">
     <div class="row resizable">
      <div class="col-100">
        <h4 class="text-center josefin-sans-bold-font">Welcome to BriskMail</h4>
      </div>
    </div>
  </div>
  <form id="g-user-signup-form" action="{{ app.data.globalSettings.apiUrl }}/user-signup@processing" method="POST" class="form-ajax-submit">
  <div class="block">
     <div class="row resizable">
      <div class="col-100">
        <h5 class="text-center josefin-sans-bold-font">Provide your phone number</h5>
        <h5 class="text-center josefin-sans-light-font">The number is where you will recieve your OTP</h5>
        <div class="list">
          <ul>
            <li class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-floating-label">+234 | Mobile Number</div>
                <div class="item-input-wrap">
                  <input id="phonenumber" type="text" name="phone" required validate pattern="[0-9]*" data-error-message="Only numbers please!" {{#if app.device.android }} onkeypress="app.methods.validateInput()" {{/if}} {{#if app.device.ios }} @keypress="app.methods.validateInput()" {{/if}} >
                  <span class="input-clear-button"></span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="block">
   <div class="row resizable">
    <div class="col-100">
      <button id="send-otp" class="col button button-large button-fill g-button-wide g-button-disabled" type="submit">Send OTP</button>
      <div class="list">
        <ul>
          <li>
            <label class="item-checkbox item-content">
              <input type="checkbox" name="terms-checkbox" value="" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title josefin-sans-bold-font">Accept our <a href="/terms/" class="gazelle-blue-text josefin-sans-bold-font">terms and conditions</a></div>
              </div>
              <span class="input-clear-button"></span>
            </label>
          </li>
        </ul>
      </div>
      <h5 class="text-center josefin-sans-bold-font">Existing User? 
        <a href="/login/" class="brown-color-text josefin-sans-bold-font">Login</a>
      </h5>
    </div>
  </div>
  </div>
</form>
</div>
</div>

ROUTES.JS

{
    path: '/user-signup/',
    templateUrl: './pages/user/user-signup.html',
  },
8

Try to remove te spaces inside the curly braces:

{{app.data.globalSettings.apiUrl}}

9

This is the error it returns

0:11564 Uncaught (in promise) TypeError: Cannot read property '2' of null
    at parseComponent (0:11564)
    at Object.parse (0:11701)
    at 0:10013

When i use componentUrl

{
    path: '/user-signup/',
    componentUrl: './pages/user/user-signup.html',
  },

When i use templateUrl the page does not navigate to the next page.

10

If you want to use componentUrl, your file should contain component parts. Please look at this page to see how single file components work:

https://framework7.io/docs/router-component.html#single-file-component

If it does not navigate to the next page while using templateUrl, check if there appears any error messgae on the console. Or check out the kitchen sink app, to see many examples.

11

Hi,
user-signup.html should go as follow

<template> //your all html </template>