knockoutjs异步调用赋值导致的无缝滚动组件不起作用的处理
2016-12-05 17:03
281 查看
html代码:
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秒还没加载上,那就悲剧了
<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秒还没加载上,那就悲剧了
相关文章推荐
- 在sql中循环调用存储过程时因为传入参数赋值疏忽导致的bug
- 一个ArcGIS Javascript API的BUG和处理办法 - 调用两次Draw工具条deactivate方法导致的错误
- iOS开发之多图片无缝滚动组件封装与使用
- android ListView/Recyclerview滚动时自动调用onCheckedChanged导致CheckBox状态混乱的解决办法
- android 当ListView滚动时自动调用 onCheckedChanged 导致CheckBox 状态不停变化
- 安全编程: 安全地调用组件--如何处理调用和返回值与调用哪些组件一样重要
- iOS开发之多图片无缝滚动组件封装与使用
- AE开发中,对 COM 组件的调用返回了错误 HRESULT E_FAIL,在地理处理中,即GP工具处理时出错
- android 当ListView滚动时自动调用 onCheckedChanged 导致CheckBox 状态不停变化 的解决办法
- Appium调用真机apk导致直接路径处理方法
- js函数,简单调用无缝滚动(横向\纵向)
- AE开发中,对 COM 组件的调用返回了错误 HRESULT E_FAIL,在地理处理中,即GP工具处理时出错
- 同一页面可次调用的jquery文字无缝滚动插件代码
- iOS开发之多图片无缝滚动组件封装与使用
- 页面单击按钮弹出modaldialog然后调用ajax处理程序获取数据,给父级页面控件赋值
- 一个ArcGIS Javascript API的BUG和处理办法 - 调用两次Draw工具条deactivate方法导致的错误
- 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止。它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用。
- listview里面checkbox选中状态乱蹦+滚动listview的时候自动调用 onCheckedChanged 导致CheckBox 状态不停变化
- 关于使用Spring声明式事务时,在类的内部方法互相调用时,Spring无法拦截内部方法调用,导致事务不起作用的问题研究
- swift简单处理调用高清大图导致内存暴涨的情况