AC objects created on each load of fw7 content page

@George for me, this is a blocker. Have I missed something?

2.5.6 Bug

I’m using content pages within a single view of a framework7 app. Each time a content page is loaded, the app connect objects are created, turning them into an array.

Here is a simple setup.
Archive.zip (1.8 KB)

It is a index.html with a single content page. On the content page there is an autocomplete element and a server connect.

The navigation is simply from index, to back, and then using the back link.

You can see the element changes as I execute dmx.app.data after each visit to the content page.

Screen Shot 2020-02-16 at 11.40.28 AM

Well as content pages are loaded so are their components. So if you have a server connect on the content page - it will be loaded when the content page gets injected.

If you want a global server connect loaded once you should put it on the main index page/view.

re: server connect that is probably fine, but then I could really use an update that allows content pages to see things from the head page. :slight_smile:

But with an autocomplete, I guess you are saying I just can’t use it?

1 Like

Also, what about a server connect form?

I think there was also a caching option in the f7 content pages that prevents the loading again - once loaded.

But agree that double creation is wrong - maybe @patrick should advise.

I have to investigate the F7 implementation, normally the components in an ajax like view should be destroyed when a new page is loaded. Could be a bug.

Thanks @patrick

If you have ideas on a workaround, I’m all ears as this has me severely blocked for now.

After a lengthy discussion about the App Connect integration with Framework7, we came to the conclusion that more in depth / low level integration is needed.

Happily Framework7 is very extendible with “plugins”. So we will making a new App Connect integration in the form of such plugin, together with the few components that we need to make as App Connect components as well like view/route and pages. So that they nicely create a data scope in App Connect and also have actions that you can call.

All this will result in a single ja file that you can just include after the dmxAppConnect.js but before app.js

When @patrick has developed the initial version it will attach it here so you can test. Should be in the next few days.

2 Likes

An early WIP version for the new Framework7 integration with Wappler. Just include the javascript file after dmxAppConnect.js.

dmxFramework7.zip (634 Bytes)

The pageMounted event in the app.js can be removed.

  on: {
    pageMounted: function (page) {
      if (window.dmx && dmx.app) {
        dmx.app.$parse(page.el);
        dmx.app.$update();
      }
    }
  },

Okay, loaded in.

First thing I notice is that the following is not triggering:

dmx-show="(get_menu_items.data.menu_items.count() > 0)

Currently testing on browser platform of fw7

Looks like placement has changed…I’ll update everything.

Screen Shot 2020-02-19 at 9.19.18 AM

The new implementation the views and pages will become App Connect components, still looking which methods

we will implement on the components, will certainly add the navigate to the view component.

When you add an id on the view/page element it will get that name in the data structure instead of f7view and f7page.

Please post all problems you encounter, it is a very early WIP version.

Where is this dmx-show attribute, is inside a view or page, is it loaded later using the router?

Index is head and everything else so far is a content page loaded into view-main.

For this particular dmx-show it is on /review/, which is loaded via href on /home/

And since I wasn’t clear…the get_menu_items being evaluated is a server connect on index inside of App, but outside of App Root.

Hold on that show issue @patrick I think it relates to the server connect form being moved.

@patrick,

The show issue was definitely a red herring…nothing to fix there.

Should I continue to insert js and style tags into content pages via a fw7 page:init, or can I now include that directly on the content page?

Good to hear that there are no issues until now.

What kind js and styles are you injecting into the content pages?

We are working on a better way for the content pages. At this moment you have to place a placeholder on the main page inside the view where the content page is being inserted. This will probably be changed and not needed anymore. You only have to specify in the content page where the main page is so that we can put the needed js includes in the main page. We also having some problems with the template tag in the content pages at the moment which we hope to fix soon.

Right now I’m injecting two things.

  1. google places api

  2. initialization of a swiper

But either of those may in fact be traced backed to the duplication of ac elements, so might not really be necessary. They got things working for me, but I haven’t gone back yet and tried to put that code back on the content page so don’t put too much weight behind that.

@patrick

Not sure it is because of the recent update, but I’m not able to get the no-toolbar class to work.

Setup is main-view, immediately followed by a child toolbar (a “common” toolbar.) I then have a series of content page includes (although removing them produces the same issue) and finally my index page. On the index I have the no-toolbar class added, but it continues to display.

Ideas?