Dynamic Attributes and Framework7

Mobile Apps
1

Hi,

When creating a project for mobile using Framework 7, I am trying to use Dynamic Attributes.

When previewing a sub-page that contains Dynamic Attributes on it, the attribute is on (dmx-hide) and it works fine but when running index.html and then clicking through to that page, the page loads and rolls in OK but the dynamic events on that sub-page are now not working.

I have added the App Connect framework to both the page and index.html but it will still not work.

Any idea where I am going wrong?

Cheers.

2

Are you using the supplied app.js to initialize Framework7 or your own version?

it should have a specific code to activate app connect on sub pages, see the pageMounted peace below:

var app = new Framework7({
  id: 'io.framework7.testapp',
  root: '#app',
  theme: theme,
  data: function () {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },
    };
  },
  on: {
    pageMounted: function (page) {
      if (window.dmx && dmx.app) {
        dmx.app.$parse(page.el);
        dmx.app.$update();
      }
    }
  },
  methods: {
    helloWorld: function () {
      app.dialog.alert('Hello World!');
    },
  },
  routes: window.routes ? window.routes : null,
  vi: {
    placementId: 'pltd4o7ibb9rc653x14',
  },
});```
3

Thanks for your reply, George!

I am using the supplied app.js and have the following code:

    var app = new Framework7({
  id: 'io.framework7.testapp',
  root: '#app',
  theme: theme,
  data: function () {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },
    };
  },
  on: {
    pageMounted: function (page) {
      if (window.dmx && dmx.app) {
        dmx.app.$parse(page.el);
        dmx.app.$update();
      }
    }
  },
  methods: {
    helloWorld: function () {
      app.dialog.alert('Hello World!');
    },
  },
4

Should work fine - can you put an example somewhere online so we can check it?

5

Hi, sure.

Here is a demo:
https://app1.elementuk.app/wappler-example/www/index.html

  1. Click on the Submit button.

  2. When you click on Record and then the stop button it should show or hide

There is a JS error in there but that is because it is for a cordova plugin that wont work in the browser. It still doesn’t work when compiled to an app BTW.

6

I don’t see App Connect included in the main index? Are you sure you added it there as framework?

7

Sorry - please check again now.

8

Move the App Connect variable that you use for the toggle inside the page.

9

Ah-ha!

Thanks, that seems to have done the trick :grinning:

10

Two days I been searching for this answer. Sometimes you got to burn to learn. Thanks this to solved the same issue

1 Like