Swipe to Reveal is not working

问题:

I have implemented a swipe to reveal Oracle JET component.

Below is my Js code

   this.action = ko.observable("No action taken yet");     this.handleReady = function()     {          // register swipe to reveal for all new list items         $("#listview").find(".item-marker").each(function(index)         {             var item = $(this);              var id = item.prop("id");               var startOffcanvas = item.find(".oj-offcanvas-start").first();             var endOffcanvas = item.find(".oj-offcanvas-end").first();                   // setup swipe actions                            oj.SwipeToRevealUtils.setupSwipeActions(startOffcanvas);             oj.SwipeToRevealUtils.setupSwipeActions(endOffcanvas);              // make sure listener only registered once             endOffcanvas.off("ojdefaultaction");             endOffcanvas.on("ojdefaultaction", function()              {                 self.handleDefaultAction(item);             });         });     };      this.handleDestroy = function()     {         // register swipe to reveal for all new list items         $("#listview").find(".item-marker").each(function(index)         {             var startOffcanvas = $(this).find(".oj-offcanvas-start").first();                                 var endOffcanvas = $(this).find(".oj-offcanvas-end").first();                                  oj.SwipeToRevealUtils.tearDownSwipeActions(startOffcanvas);             oj.SwipeToRevealUtils.tearDownSwipeActions(endOffcanvas);         });     };      this.handleMenuBeforeOpen = function(event, ui)     {         var target = event.originalEvent.target;         var context = $("#listview").ojListView("getContextByNode", target);          if (context != null)         {             self.currentItem = $("#"+context['key']);         }         else         {             self.currentItem = null;         }     };      this.handleMenuItemSelect = function(event, ui)     {         var id = ui.item.prop("id");         if (id == "read")             self.handleRead();         else if (id == "more1" || id == "more2")             self.handleMore();         else if (id == "tag")             self.handleFlag();         else if (id == "delete")             self.handleTrash();     };      this.closeToolbar = function(which, item)     {         var toolbarId = "#"+which+"_toolbar_"+item.prop("id");         var drawer = {"displayMode": "push", "selector": toolbarId};          oj.OffcanvasUtils.close(drawer);     };      this.handleAction = function(which, action, event)     {         if (event != null)         {             self.currentItem = $(event.target).closest(".item-marker");              // offcanvas won't be open for default action case             if (action != "default")                 self.closeToolbar(which, self.currentItem);         }          if (self.currentItem != null)             self.action("Handle "+action+" action on: "+self.currentItem.prop("id"));     };      this.handleRead = function(data, event)     {         self.handleAction("first", "read", event);     };      this.handleMore = function(data, event)     {         self.handleAction("second", "more", event);     };      this.handleFlag = function(data, event)     {         self.handleAction("second", "Rejected", event);     };      this.handleTrash = function(data, event)     {         self.handleAction("second", "Accepted", event);         self.remove(self.currentItem);      };      this.handleDefaultAction = function(item)     {         self.currentItem = item;         self.handleAction("second", "default");         self.remove(item);     };      this.remove = function(item)     {         // unregister swipe to reveal for removed item         var startOffcanvas = item.find(".oj-offcanvas-start").first();                             var endOffcanvas = item.find(".oj-offcanvas-end").first();                              oj.SwipeToRevealUtils.tearDownSwipeActions(startOffcanvas);         oj.SwipeToRevealUtils.tearDownSwipeActions(endOffcanvas);    alert(JSON.stringify(self.allItems()));     alert(item.toString());          self.allItems.remove(function(current)         {             return (current.id == item.prop("id"));           });                 };     }     return PeopleViewModel;     }); 

HTML code:

       <ul id="listview"         data-bind="ojComponent: {component: 'ojListView',         data: listViewDataSource,         item: {template: 'peoplelist_template'},         selectionMode: 'single',         ready: handleReady,          destroy: handleDestroy,          optionChange: changeHandler,         rootAttributes: {style: 'width:100%;height:100vh;overflow:auto; margin-top: 5px'},         scrollPolicy: 'loadMoreOnScroll',         scrollPolicyOptions: {fetchSize: 10}}">     </ul>  <script id="peoplelist_template"> 

        <div style="padding:0.8571rem">           <div class="oj-flex oj-flex-items-pad">                 <div class="oj-flex-item oj-lg-4 oj-md-4">                     <img alt="employee image" class="demo-circular demo-employee-photo" style="float:left;" data-bind="attr: {src: $parent.getPhoto($data['name'])}"/>                     <h2 class="demo-employee-name" data-bind="text: $data['from']"></h2>                     <div class="demo-employee-title" data-bind="text: $data['title']"></div>                     <div class="demo-employee-dept" data-bind="text: $data['deptName']"></div>                 </div>                    <div style="line-height: 1.5em; height: 3em; overflow: hidden; text-overflow: ellipsis" class="oj-text-sm oj-text-secondary-color" data-bind="text: $data['content']"></div>              </div>   </div>          <div tabIndex="-1" data-bind="attr: {id: 'first_toolbar_'+empId}" class="oj-offcanvas-start" style="width:75px">              <div data-bind="click:$parent.handleRead">                  <div class="oj-flex-bar" style="height:100%">                      <div class="oj-flex-bar-center-absolute">                          <div class="oj-flex oj-sm-flex-direction-column">                              <div title=".demo-library-icon-24" role="img" class="oj-flex-item demo-library-icon-24 demo-icon-font-24"></div>                              <div style="padding-top: 10px" class="oj-flex-item">Read</div>                          </div>                      </div>                  </div>              </div>          </div>           <div tabIndex="-1" data-bind="attr: {id: 'second_toolbar_'+empId}" class="oj-offcanvas-end" style="width:225px">              <div  class="oj-swipetoreveal-more" data-bind="click: $parent.handleMore">                  <div class="oj-flex-bar" style="height:100%">                      <div class="oj-flex-bar-center-absolute">                          <div class="oj-flex oj-sm-flex-direction-column">                              <div title=".demo-library-icon-24" role="img" class="oj-flex-item fa fa-bars"></div>                              <div style="padding-top: 10px" class="oj-flex-item">More</div>                          </div>                      </div>                  </div>              </div>              <div style="background-color:#b81900" data-bind="click:      $parent.handleFlag"  class="oj-swipetoreveal-flag">                  <div class="oj-flex-bar" style="height:100%">                      <div class="oj-flex-bar-center-absolute">                          <div class="oj-flex oj-sm-flex-direction-column">                              <div title=".demo-library-icon-24" role="img" class="oj-flex-item fa fa-times"></div>                              <div style="padding-top: 10px" class="oj-flex-item">Reject</div>                          </div>                      </div>                  </div>              </div>              <div  style="background-color:#009638" data-bind="click: $parent.handleTrash" class="oj-swipetoreveal-alert oj-swipetoreveal-default">                  <div class="oj-flex-bar" style="height:100%">                      <div class="oj-flex-bar-center-absolute">                          <div class="oj-flex oj-sm-flex-direction-column">                              <div title=".demo-library-icon-24" role="img" class="oj-flex-item fa fa-check"></div>                              <div style="padding-top: 10px" class="oj-flex-item">Approve</div>                          </div>                      </div>                  </div>              </div>          </div>       </div>     </div>    </li> </script> 

Actual problem is the listItem is not getting removed while approving.(The Approve div is call Handletrash function).

I dont know where I went wrong ??could anyone help me to solve this issue??

回答1:

There's a lot of code here, which makes it hard to understand what everything is intended to do, and harder to pinpoint what the problem might be. That's why it's best to make a Minimal, Complete, and Verifiable Example. Also, in the process of removing all the code that does not directly affect your problem, you may solve it yourself.

I notice in your code that you have a number of jQuery calls. That's a significant red flag. Your contract with Knockout is that you will manipulate your data model and Knockout will use it to control the DOM. If you "go behind Knockout's back" and manipulate the DOM yourself, you and Knockout are going to be stepping on each other's toes.

Knockout provides two ways for you to customize how it manipulates the DOM: animated transitions and custom bindings. "Swipe to reveal" sounds like a transition to me, but looking at your code, it appears there's a whole lifecycle involved, so I think you need to make a custom binding handler.

All of your DOM-manipulating code should be inside the binding handler, and all of it should be restricted to the element of the binding handler. There should be no document-wide selectors.

文章来源: Swipe to Reveal is not working