knockoutjs异步调用赋值导致的无缝滚动组件不起作用的处理

最新推荐文章于 2017-06-07 10:15:49 发布

sxf359

最新推荐文章于 2017-06-07 10:15:49 发布

阅读量637

点赞数

分类专栏： javascript 文章标签： jquery 异步 knockoutjs jquery.cxScroll

本文链接：https://blog.csdn.net/sxf359/article/details/53467100

版权

javascript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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秒还没加载上，那就悲剧了