滑动显示不起作用 [英] Swipe to Reveal is not working

问题描述

我实现了滑动以显示 Oracle JET 组件.

下面是我的js代码

 this.action = ko.observable("还没有采取任何行动");this.handleReady = function(){//注册滑动以显示所有新列表项$("#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();//设置滑动动作oj.SwipeToRevealUtils.setupSwipeActions(startOffcanvas);oj.SwipeToRevealUtils.setupSwipeActions(endOffcanvas);//确保监听器只注册一次endOffcanvas.off("ojdefaultaction");endOffcanvas.on("ojdefaultaction", function(){self.handleDefaultAction(item);});});};this.handleDestroy = function(){//注册滑动以显示所有新列表项$("#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);如果(上下文！= null){self.currentItem = $("#"+context['key']);}别的{self.currentItem = null;}};this.handleMenuItemSelect = function(event, ui){var id = ui.item.prop("id");如果(id ==读")self.handleRead();else if (id == "more1" || id == "more2")self.handleMore();否则如果(id ==标签")self.handleFlag();否则如果(id ==删除")self.handleTrash();};this.closeToolbar = function(which, item){var toolbarId = "#"+which+"_toolbar_"+item.prop("id");var drawer = {"displayMode": "push", "selector": toolbarId};oj.OffcanvasUtils.close(抽屉);};this.handleAction = function(which, action, event){如果(事件！= null){self.currentItem = $(event.target).closest(".item-marker");//offcanvas 不会为默认操作案例打开如果(动作！=默认")self.closeToolbar(which, self.currentItem);}if (self.currentItem != null)self.action("处理"+action+" action on: "+self.currentItem.prop("id"));};this.handleRead = 函数(数据，事件){self.handleAction("first", "read", event);};this.handleMore = 函数(数据，事件){self.handleAction("second", "more", event);};this.handleFlag = 函数(数据，事件){self.handleAction("second", "Rejected", event);};this.handleTrash = 函数(数据，事件){self.handleAction("second", "Accepted", event);self.remove(self.currentItem);};this.handleDefaultAction = function(item){self.currentItem = 项目；self.handleAction("second", "default");self.remove(item);};this.remove = 功能(项目){//取消注册滑动以显示已删除的项目var startOffcanvas = item.find(".oj-offcanvas-start").first();var endOffcanvas = item.find(".oj-offcanvas-end").first();oj.SwipeToRevealUtils.tearDownSwipeActions(startOffcanvas);oj.SwipeToRevealUtils.tearDownSwipeActions(endOffcanvas);警报(JSON.stringify(self.allItems()))；警报(item.toString())；self.allItems.remove(功能(当前){return (current.id == item.prop("id"));});};}返回 PeopleViewModel；});

HTML 代码:

 
<script id="peoplelist_template">

 
<div class="oj-flex oj-flex-items-pad"><div class="oj-flex-item oj-lg-4 oj-md-4"><img alt="员工形象" 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 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 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">读取</div>