Let’s make FAQ section

Guys, I see many beginners struggle with same questions and pitfalls all the times. I suggest to create new “must read” FAQ topic here on forum.

In this topic let’s collect feedback, proposals, discussions and questions of what to post in main FAQ topic.

Just post here questions/issues you think will be good to have covered in FAQ.

This is, for example, what quickly comes into my mind:

  • What is the difference between $(document).on(‘click’, ‘.link’, …) and $(link).on(‘click’, …)?
  • Cordova deviceready event doesn’t work
  • Event listeners for home page don’t work after it was reloaded
  • pageInit event doesn’t work for home page
  • how to load home page as component/template
  • how to do infinite-scroll for routable tabs
  • how to do pull to refresh for routable tabs
  • Android backbutton doesn’t work
1 Like

Great…

  • Status bar covers part of navbar, and keyboard hides input…
    *Where do you put cordova code in f7+ vue.js? for example code to control back button in the whole app?
    *Android back button closes the app
    *Google Autocomplete closes on selection without value
    *Make ajax call in the background
    *How to use localstorage
    *Inline calendar not showing
    *F7 panels slow peformance on Android(Box shadow issue)

When I remember more, I will post them…
Thanks for the great work @nolimits4web

2 Likes
  • в чем разница между keepAlive и stackedPages
1 Like

Interaction componets through from Events Bus(f7v4), and Interaction Data Bus(Import special Data Bus or get from this.$root.$data)

A good question for FAQ section

how to do infinite-scroll for routable tabs

How to navigate from tab to page and then return to tab page again. I see a lot question like this. navigation problem.

Adding a function to a button:

$$(document).on('page:init', '.page[data-name="pageName"]', function (e) { 
  $$('.page-content').find('#buttonID').on('click', function (e) { 
    app.dialog.alert('Button clicked!');
  })
})

Using Android back button:

Let’s return to this topic. Sorry, but somehow it didn’t proceed.
Please guys, share your most common problems/issues/misunderstandings you had or have with Framework7. I will start working on this next week :slight_smile:

I really like the way the Quasar guys created sections for different common aspects of the framework.

or

…these ‘best-practices’ pages are a good source of information for developers of all kinds (from beginner to pro).

I for one, would create this kind of site using Markdown. That way, it is pretty easy to break it down into smaller junks and added continuously…

2 Likes

Data binding and in particular data management between external resources and a webapp cq your UI are far from trival. Vue, React and Svelte make use of (data) stores but what would be considered best practice for F7core without using one of those three? Personnally, I like very much the way Svelte handles this problem. A guide or blog about this topic might help newcomers to Framework7 who want to use external data (provided by an API) at the client side.

1 Like

Introduction

The purpose of this topic is to collect CSS and JS libraries which are complementary to Framework 7. It is not intended to create another “awesome” list but to avoid re-inventing the wheel by sharing our collective experience. Finding multiple libraries that might fit your requirements is one thing but finding out how well the solution fits is also a time consuming effort.

Great solutions such as React, Vue, Svelte and Electron are complementary but deserve an topic entry on their own. Therefore I propose to narrow the scope to complementary libraries preferable not depending on other libraries.

The following two libraries are mentioned and recommended earlier in the Framweork 7 forum. They can also be used as an example for the amount of information c.q. level of detail I had in mind: just a summary and a reference to the library. No justification or review. Likes in the forum could be indication whether other members agree with the proposed library but the amount of stars in Github might also be an important indication of the useability and quality.

One day this thread might be more suitable as part of a tips & trick or best-practises collection. Until then, feel free to add you experience with addition CSS or JS libraries. Sugestions for other F7 complementary functionality are compression and encryption.

Again, the main purpose is to be aware of the existance of Framework 7 complementary libraries based on positive experiences. The judgement of a library is applicable for your application is up to you.

2 Likes

Drag and drop between multiple sortable lists

SortableJS

A JavaScript library for reorderable drag-and-drop lists.

Client side storage

I distinquish three different uses cases to store data at the client side:

  1. easy storage below 5 MB which can be performed by using localstorage
  2. storage less then 50 MB with roughly the same simple API as localstorage with an almost similar name: localForage.
  3. storage less then 50Mb with query functionality and database versioning: Dexie.js

Note: only the last two are actual complementary libraries.

Localstorage and IndexedDB are default supported within browsers. localForage and Dexie are wrappers for IndexedDB and both simplify the API of IndexedDB.

localForage

localForage is a fast and simple storage library for JavaScript. localForage improves the offline experience of your web app by using asynchronous storage (IndexedDB or WebSQL) with a simple, localStorage-like API. It uses localStorage in browsers with no IndexedDB or WebSQL support.

localForage is a key-value based storage just like localstorage with simple set and get functionality. To find all objects that match a specific set of attribute conditions, you have to iterate yourself.

Dexie.js

A Minimalistic Wrapper for IndexedDB.

Also key-value based but with additional functionality to find all objects which match one or more attribute conditions.
Another feature is database versioning which allows you to implement backward compatibility in case your applications needs to be extended with other or different fields.

2 Likes

Feature detection

Modernizr

To detect what HTML, CSS and JavaScript features the user’s browser has to offer.

It allows you to detect the actual availability of next-generation web technologies and to deal with browsers who are not ready yet in an adaptive/responsive way.

There is a download page where the features you want to use in your project can be selected, to provide a smaller/customized build of Modernizr.

1 Like