связующего обработчика. Не должно быть никаких селекторов по всему документу.

лизовал пролистывание, чтобы показать компонент Oracle JET.

Ниже мой код Js

   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 код:

       <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>

Актуальная проблема заключается в том, что listItem не удаляется при утверждении (Div для подтверждения - это вызов функции Handletrash).

Я не знаю, где я ошибся? Может кто-нибудь помочь мне решить эту проблему?

Ответы на вопрос(1)

Ваш ответ на вопрос