Where are my Swipeout events?

Questions
1

Here’s my template :

<li class="swipeout">     
            <div class="swipeout-content">
                <a href="/product/{{jeu_id}}/" class="item-link">        
                  <div class="item-content">
                  <div class="item-media">
                      <img src="/wp-content/uploads/{{cover_url}}" style="max-width:150px;">
                    </div>
                    <div class="item-inner">
                        ... some code.
                    </div>
                </div>
              </a>
            </div>
            <div class="swipeout-actions-left">
                <a href="#" class="swipeout-like color-orange alert-mark swipeout-actions-opened">Aimer</a>
                <a href="#" class="swipeout-list  color-green open-more-actions">Lister</a>
              </div>
              <div class="swipeout-actions-right">
                <a href="#" class="swipeout-sell color-blue swipeout-actions-opened">Vendre</a>
                <a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Supprimer</a>
              </div>
        </li>

the list shows all my actions, even deletes a li if i’m trying to.

But, i don’t understand how / where to put javascript logic.
I put this code in my template.html file.

   console.log($$('#swipeout-like'));  // object.length => 0 ??
  $$('#swipeout-like').on('click', function () {
    console.log('1'); //=> not called
    app.dialog.alert('Reply');
  });
  $$('#swipeout-link').on('click', function () {
    console.log('2'); //=> not called
    app.dialog.alert('Forward');
  });
  $$('#swipeout-sell').on('click', function () {
    console.log('3'); //=> not called
    app.dialog.alert('Forward');
  });

So i can guess $$ don’t see bunch of code put in my template. how can i manage to make it see ?

Thanks,

2

it seems Dom7 is lost when Swipeout is put under list (media list).

$$(’.list’) works.
the child $$(’.swipeout’) doesn’t work.

3 
{
  path:'/path/',
  on:{
    pageInit:function(e,page){
      var pageContainer=page.$pageEl;
      pageContainer.on('click','#swipeout-like',function(){
        console.log('1');
      }); 
      pageContainer.on('click','#swipeout-sell',function(){
        console.log('3');
      });
    }
  }
}
1 Like
4

Don’t use JavaScript code inside of templates. It is better to use Router Component http://framework7.io/docs/router-component.html

1 Like
5

thank you very much, plpl !

6

where can i put the delete event callback ?

$$('.swipeout').on('swipeout:deleted', function () {
      console.log('4');
      app.dialog.alert('Thanks, item removed!');
    });

my html :

<a href="#" data-index="{{@index}}" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Supprimer</a>

i do have the confirm dialog box, but the console.log never logs.

7

create an issue on gitHub
"sometimes" transitionEnd not get fired

if you inspact the document
you will see the element in dom (NOT deleted)
<li class="swipeout swipeout-opened swipeout-deleting swipeout-transitioning" style="height: 0px;"></li>