滑动到显示不起作用 [英] Swipe to Reveal is not working
本文介绍了滑动到显示不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是我的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（。 （）;
// setup swipe actions
oj.SwipeToRevealUtils.setupSwipeActions（startOffcanvas）;
oj.SwipeToRevealUtils.setupSwipeActions（endOffcanvas） ;
//确保监听器只注册一次
endOffcanvas.off（ojdefaultaction）;
endOffcanvas.on（ojdefaultaction，function（）
{
self.handleDefaultAction（item）;
}）;
}）;
};
this.handleDestroy = function（）
{
//注册刷卡以显示所有新列表项
$（＃listview）。find（每个（函数（索引）
{
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（ 项目标志物）;
// offcanvas不会为默认操作而打开
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 =函数（item）
{
//取消注册刷卡以显示已删除的项目
var startOffcanvas = item.find（。oj-offcanvas -start）第一（）;
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））;
}）;
};
}
返回PeopleViewModel;
}）;
HTML代码：
< ul id =listview
data-bind =ojComponent：{component：'ojListView'，
data：listViewDataSource，
item：{template：' peoplelist_template'}，
selectionMode：'single'，
ready：handleReady，
destroy：handleDestroy，
optionChange：changeHandler，$ b $ rootAttributes：{style：'width： 100％;高度：100vh;溢出：自动; 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>
< h2 class =demo-employee-namedata-bind =text：$ data ['from']>< / h2>
< div class =demo-employee-titledata-bind =text：$ data ['title']>< / div>
< div class =demo-employee-deptdata-bind =text：$ data ['deptName']>< / div>
< / div>
< div style =line-height：1.5em; height：3em; overflow：hidden; text-overflow：ellipsisclass =oj-text-sm oj-text-secondary-color data-bind =text：$ data ['content']>< / div>
< / div>
< / div>
< div tabIndex = - 1data-bind =attr：{id：'first_toolbar _'+ empId}class =oj-offcanvas-startstyle =width：75px>
< div data-bind =click：$ parent.handleRead>
< div class =oj-flex-barstyle =height：100％>
< div class =oj-flex-bar-center-absolute>
< div class =oj-flex oj-sm-flex-direction-column>
< div title =。demo-library-icon-24role =imgclass =oj-flex-item demo-library-icon-24 demo-icon-font-24><< ; / DIV>
< div style =padding-top：10pxclass =oj-flex-item>阅读< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< div tabIndex = - 1data-bind =attr：{id：'second_toolbar _'+ empId}class =oj-offcanvas-endstyle =width：225px >
< div class =oj-swipetoreveal-moredata-bind =click：$ parent.handleMore>
< div class =oj-flex-barstyle =height：100％>
< div class =oj-flex-bar-center-absolute>
< div class =oj-flex oj-sm-flex-direction-column>
< div title =。demo-library-icon-24role =imgclass =oj-flex-item fa fa-bars>< / div>
< div style =padding-top：10pxclass =oj-flex-item>更多< / div>
< / div>
< / div>
< / div>
< / div>
< div style =background-color：＃b81900data-bind =click：$ parent.handleFlagclass =oj-swipetoreveal-flag>
< div class =oj-flex-barstyle =height：100％>
< div class =oj-flex-bar-center-absolute>
< div class =oj-flex oj-sm-flex-direction-column>
< div title =。demo-library-icon-24role =imgclass =oj-flex-item fa fa-times>< / div>
< div style =padding-top：10pxclass =oj-flex-item>拒绝< / div>
< / div>
< / div>
< / div>
< / div>
< div style =background-color：＃009638data-bind =click：$ parent.handleTrashclass =oj-swipetoreveal-alert oj-swipetoreveal-default>
< div class =oj-flex-barstyle =height：100％>
< div class =oj-flex-bar-center-absolute>
< div class =oj-flex oj-sm-flex-direction-column>
< div title =。demo-library-icon-24role =imgclass =oj-flex-item fa fa-check>< / div>
< div style =padding-top：10pxclass =oj-flex-item>批准< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / li>
< / script>
实际的问题是listItem在批准时没有被移除（批准div是调用Handletrash函数） 。
我不知道我哪里出了问题 - 谁能帮我解决这个问题??
解决方案
这里有很多代码，这使得很难理解所有事情都打算做什么，而更难确定问题的症结所在。这就是为什么最好使用最小，完整和可验证示例。此外，在删除所有不直接影响问题的代码的过程中，您可以自己解决它。
我注意到您的代码中有多个jQuery调用。这是一个重要的红旗。您与Knockout的合同是您将操纵数据模型，Knockout将使用它来控制DOM。如果你落后于Knockout的背后并且自己操纵DOM，你和Knockout将会逐步加强对方的脚趾。
淘汰赛提供两种方式让你自定义它如何操作DOM：动画转换和自定义绑定。 轻扫以显示听起来像是向我转换的过程，但看着您的代码，看起来整个生命周期都涉及到了，所以我认为您需要制作自定义绑定处理程序。
您的所有DOM操作代码都应位于绑定处理程序中，并且它应该全部限制为绑定的元素处理程序。应该没有文档范围的选择器。
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??
解决方案
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.
这篇关于滑动到显示不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
