Is there a way to update the content data with setState method inside a dynamically created modal sheet?

1

I have a modal sheet dynamically created and the template has handlebars inside, when the modal is opened I feed the content with the data.

The issue I am having this content data inside this modal sheet can be updated.

I am using self.$setState method to change and update the component data of the array previously passed.

With a new page there is no problem using self.$setState for this but inside a modal sheet nothing happens to update the component data using self.$setState.

any solution or ideas how to make this work?

here the code

 var tmpl = '<div class="sheet-modal" style="height:100%;">\
 <div class="sheet-modal-inner">\
   <div class="page-content infinite-scroll-content">\
     {{#ifCond weatherMetric "==" "celsius"}}
        {{converttocelsius weather.current.temp}}
     {{else}}
        {{converttofarenheit weather.current.temp}}
     {{/ifCond}}
      <label class="toggle color-black">\
          <input type="checkbox" checked>\
          <span class="toggle-icon"></span>\
       </label>\
   </div>\
 </div>\
</div>';

var obj = app.utils.extend(weather, {
    weatherMetric: 'celsius',
});

var dynamicSheet = app.sheet.create({
  content: Template7.compile(tmpl)(obj),
  on: {
    open: function (sheet) {
      console.log('Sheet open');
    },
    opened: function (sheet) {
      console.log('Sheet opened');

       var toggle = app.toggle.create({
       el: '.toggle',
       on: {
           change: function () {
             var toggle = app.toggle.get('.toggle');
             if (toggle.checked) {
                 console.log('Toggle checked');
                 self.$setState({
                   weatherMetric: "celsius"
                 });

                 } else {
                   console.log('Toggle unchecked');
                   self.$setState({
                     weatherMetric: "farenheit"
                   });
              }
           }
    },
  }
});

Let us say inside the modal sheet there is the weather information of a city for instance the temperature and this can be changed from celsius the default value to fahrenheit with a toggle.

The problem it seems that because the template was already rendered when opened the modal sheet, the component data cannot be updated after using self.$setState.

Is there any ideas to update component data with self.$setState in a dynamically created modal sheet?

thanks for the ideas!

2

No, it will not work. $setState is a feature of router components, and dynamic sheets is not the one

1 Like
3

Ohh pitty there is no way or any solution to update the content data of a dynamic sheet once it is rendered and created; dynamic popup will be the same case here I guess.

So, should I use for this case only a new page as a solution or which similar component will help to solve this case?

Is there any way the content of a dynamic sheet already rendered can be updated with new data?

$update(callback) method could help with this or not?

thanks for any reply!

4

You can use not dynamic sheet, put it inside of your routable page (that uses VDOM) or use routable modal for this sheet https://framework7.io/docs/routes.html#routable-modals

1 Like
5

Thanks Vladimir!
I will try that way! :+1:

6

Looks like this will also solve my open thread as well @nolimits4web. I’m trying to implement a dynamic action sheet, but there’s no example to follow. I’m trying the following but without success:

<a href="/popup-content/test/" data-actions="#actions-two-groups" class="actions-open"><div actions-open="#actions-two-groups"><i class="f7-icons">ellipsis_vertical</i></div></a>

And in routes.js:

    path: '/popup-content/:popupid/',
    async: function (routeTo, routeFrom, resolve, reject) {
      var popupid = routeTo.params.popupid;
      resolve(
        {
          popup: {
            content: `
            <f7-actions id="actions-two-groups">
            <f7-actions-group>
            <f7-actions-label>` + popupid + `</f7-actions-label>
              <f7-actions-button>Share</f7-actions-button>
              <f7-actions-button>Delete Trip</f7-actions-button>
              </f7-actions-group>
              <f7-actions-group>
                <f7-actions-button color="red">Cancel</f7-actions-button>
              </f7-actions-group>
            </f7-actions>`
          }})},
  },
1 Like
7

You don’t need this, in Vue you need to do it in Vue-way

routes

import MyActions from '.../my-actions.vue';

path: '/actions/:id/',
actions: {
  component: MyActions,
},

my-actions.vue

<template>
  <f7-actions id="actions-two-groups">
            <f7-actions-group>
            <f7-actions-label>{{id}}</f7-actions-label>
              <f7-actions-button>Share</f7-actions-button>
              <f7-actions-button>Delete Trip</f7-actions-button>
              </f7-actions-group>
              <f7-actions-group>
                <f7-actions-button color="red">Cancel</f7-actions-button>
              </f7-actions-group>
            </f7-actions>
</template>
<script>
export default {
  props: {
    id: String
  }
}
</script>
2 Likes
8

I definitely was over complicating it. Thank you so much for your support!