knockoutjs异步调用赋值导致的无缝滚动组件不起作用的处理
来源:互联网 发布:com域名注册多少钱 编辑:程序博客网 时间:2024/06/10 00:37
html代码:
<div id="pic_list_3" class="scroll_vertical" data-bind="with:JobVM" > <div class="box" > <ul class="list" > <!--ko foreach:$data--> <li data-bind="text:Name()+' '+'求职'+' '+Position()+' '+Salary()"></li> <li data-bind="text:Name()+' '+'求职'+' '+Position()+' '+Salary()"></li> <!--/ko--> </ul> </div> </div>
js代码:
$(function() { $.post("/service/GetIndexJianli", {}, function (data) { //console.info(data); ko.mapping.fromJS(data, {}, page.VM.JobVM); }); $('#pic_list_3').cxScroll({ direction: 'bottom', prevBtn: false, nextBtn: false }); });
滚动组件用的是:jquery.cxScroll
由于li的填充用的是knockoutjs with绑定及foreach循环。刚开始怀疑是不是knockoutjs与jquery.cxScroll不兼容。不使用knockoutjs绑定,
而直接用
<li>abc</li>
<li>abc</li>
<li>abc</li>
这样得到的测试数据填充没问题,可以滚动,这似乎应验了不兼容的设想。但我有点不甘心,knockoutjs已经使顺手了。而且我也有点怀疑会不会
是异步加载的问题。因此我着手进行这样得测试。把
$.post("/service/GetIndexJianli", {}, function (data) { //console.info(data); ko.mapping.fromJS(data, {}, page.VM.JobVM); });改为:
$.ajax({ url: "/service/GetIndexJianli", async: false, success:function(data) { ko.mapping.fromJS(data, {}, page.VM.JobVM); } });修改后刷新页面查看,能滚动了,看来是异步加载的问题.
另一种处理方法是是在数据加载上后再调用jquery.cxScroll组件,也可以解决此问题:
$.post("/service/GetIndexJianli", {}, function (data) { //console.info(data); ko.mapping.fromJS(data, {}, page.VM.JobVM); $('#pic_list_3').cxScroll({ direction: 'bottom', prevBtn: false, nextBtn: false }); });还有一种解决办法是此代码采用setTimeout()延迟执行
$('#pic_list_3').cxScroll({ direction: 'bottom', prevBtn: false, nextBtn: false });比如选个500ms或者1000ms也可以解决。但是这个不是一个好的选择。因为$.post异步加载的时间是不确定的,依赖网络因素,
如果网络好可以完美解决此问题,如果1秒还没加载上,那就悲剧了
0 0
- knockoutjs异步调用赋值导致的无缝滚动组件不起作用的处理
- jquery异步调用自数据库获取值通过knockoutjs赋值给职位二级菜单导致的jquery的hover事件不执行的例子
- jquery ajax 异步导致赋值不起作用
- JS的无缝滚动
- 图片的无缝滚动
- 无缝滚动的制作
- 无缝滚动的实现
- vue 无缝滚动组件
- 无缝滚动的图片代码
- DIV的图片无缝滚动
- DIV的图片无缝滚动
- 照片无缝滚动的实现
- scrollview的无缝循环滚动
- DIV的图片无缝滚动
- 实现图片的无缝滚动
- 无缝滚动的小应用
- 导致notifyDataSetChanged()不起作用的问题
- knockoutjs对复选框赋值导致的去到另一页面后,再history.back()回退所有复选框被选中问题的解决
- HttpClient 4.5.2 学习随笔(1)
- Eclipse和PyDev搭建完美Python开发环境
- Could not find method compile() for arguments
- mysql主从配置详解
- wireshark基本用法及过虑规则
- knockoutjs异步调用赋值导致的无缝滚动组件不起作用的处理
- JS判断客户端是否是iOS或者Android手机移动端
- Cakephp环境安装问题:DebugKit is not installed.
- NIPS 2016 Highlighted Papers
- Android 开源框架Universal-Image-Loader完全解析(三)---源代码解读
- solr4j 操作
- JavaSE学习(3)运算符
- 成长,工作的开端(2016年7月-2016年12月)
- 启动第一个mongodb服务器