Can I tell all components to $update()?

Questions
1

Hi,

My app has several components showing, as well as the main app component.
I am use core only, no Vue, etc.

Can I make a call to tell all components to do $update(), in order to refresh the data with the template?

I tried to get component list from these vars but I did not find a way to update them.
app.cache.components
app.views

Thanks!

2

if you have a common data among all your components, it’s better to declare it once in root component and then update it, it will be re rendered on all components…
But you can access previous component by calling for example:

on: {
pageInit(event,page){
//previous route component
const component = page.pageFrom.el.f7Component;
…
}
}

3

Thank you @Ars_Rza .

I did stored data in data.
var app = new Framework7({
data: { /**/ },

I am look for a way to call all displayed component to $update at once.

4

If you put data in main App component
Then you could do this.$root.$update()

5

It is not only updating root component or parent’s component

I am look for a way $update() all displayed component at once, like this there are root, A, B, and C components.
image

These is a list of components app.cache.components, however I cannot find the method $update.

6

You can do like this:
root: (main app component)

data(){
return {
animal: ‘cat’
}
}

using animal data in A,B and C compoents:

<‌template‌>
...
My favorite animal is: {{$root.animal}} //get animal data (or anything, like methods) by $root (output: cat)
...
 <‌/‌template‌>
<‌script‌>
export default{
...
on: {
   pageInit(){
      //change root data (think we are on component A, B or C ...)
      this.$root.animal = 'dog':
      this.$root.$update(); //now every component has {{$root.animal}} will update it's value (output: dog)
      }
   }
}
<‌/script‌>
7

Ваш подход в принципе неправильный. Каждый компонент отвечает только за “себя”, а состояние меняет по событиям.

1 Like
8

if you want to access all components separately there Is a dirty method pushing all components to global window object after loading each.
then:
window.myComponents.forEach(component => component.$update())

9

This is actually the solution of my situation,
and actually I have been trying this way.

Yes, calling .$update() from the root component does update all its “children” components and so that is what I want.

But why it was not successful…?

My case, I use helper.

in one template, this field will not change when $update(),

< template>
{{ myhelper “123” }}
</ template>

to add a field contains $root, the “myhelper” field will update,

< template>
{{ myhelper “123” }}
{{ $root.animal }}
</ template>

Is this by design or a possibly bug?

later I try to make a jsfiddle to show this.

10

this is a little bit deeper than i thought, may be @nolimits4web helps you!

11

http://lok.hopto.org/update_sample/

$update() in components does not work without a {{$root.xxx }} expression.

Don’t know this is by design or a bug.

Please take a look, @nolimits4web .

12

Please read CHANGELOG:
v5.5.0

Now calling $update() on root app component should automatically update all components that depends on $root. data

1 Like
13

ok.
If I don’t put a dummy {{root._anything}} in my component, is these anywhere I can mark a component to be updated with root ?

14

You can use events https://framework7.io/docs/events.html

15

It is by design, root component update triggers children updates ONLY when those children has references to $root data

1 Like