zoukankan      html  css  js  c++  java
  • knockout --- foreach -- 前端必备

      很久很久没写博客了,丫的,节操掉一地了,颓废了,惭愧。

      很久很久没有弄 knouckout.js 了,今天重新操作,蛋疼啊,忘记得差不多了,于是只好硬着头皮再去看官网,于是,feel慢慢回来了。

      本来不打算用 knouckout 的了,但是人都是懒惰的,况且我一直信奉,不懂偷懒的程序员不是好的程序员!

      如果不偷懒,就写一大堆的js,以后维护也是很痛苦的。。。

      这里不讨论基本语法什么的,官网上一堆堆的,亲们自己去找吧~ 官网

      另外,想打算开个一系列的 knouckout,好好总结自己的所学,解放众多的那些做后端又要做前端的 程序猿,谁要看,给我32个赞,就开始写。开玩笑了,没有拉广告的嫌疑,等项目告一段落了就开始着手写了,不过也已经有人写了,我希望写点不同的。

    这里是汤姆大叔的:猛搓我

      看效果图:

    1.前端代码:

     1 <div class="modal-body" data-bind="foreach: job">
     2                     <div>
     3 
     4                         <div class="panel-group" id="accordion">
     5                             <div class="panel panel-default">
     6                                 <div class="panel-heading">
     7                                     <h4 class="panel-title">
     8                                         <a data-toggle="collapse" data-toggle="collapse"
     9                                             data-bind="text:title" data-parent="#accordion"
    10                                             href="#collapseOne"> </a>
    11                                     </h4>
    12                                 </div>
    13                                 <div id="collapseOne" class="panel-collapse collapse in">
    14                                     <div class="panel-body" data-bind="html:content"></div>
    15                                 </div>
    16                             </div>
    17                         </div>
    18                     </div>
    19 
    20                 </div>
    View Code

    2.js

    var viewModel = {
    job: ko.observableArray([ ])
    };
    ko.applyBindings(viewModel);
    

      

    3.ajax里传值回来后处理:

    viewModel.job(j);
    

      OK,以上代码搞定了!本来要很多js代码写的循环,现在在 knockout 的帮助下,一切都变得美好了!

    犯过的错误:

    1.不能重复绑定同一个元素,因为每次ajax后都会重新执行代码,代码如下(是该错误的代码):

    ko.applyBindings({
    		job : j,//这里的j是我的ajax 返回的 json数组
    	});
    

    2.基于以上错误,想到了清除绑定,但是结果就是,每次ajax请求,数据都会翻倍,比如说:我原先只有3条记录的,但是ajax后就变成6条记录了,显然不是我想要的,代码如下:

    ko.cleanNode(document.body);
        ko.applyBindings({
    		job : j,
    });
    

    解决方案在一开始的时候就已经有了,以此谨记,另外,最近得恶补 English 了,发现看 English 少了以前的感觉了。

    欢迎拍砖,转载请标明出处!

    有问题可以请教,本人QQ:651936145,请说明备注:knockout 探讨。

      

  • 相关阅读:
    subString源码分析
    我的three.js学习记录(三)
    我的three.js学习记录(二)
    2017-10-15
    我的three.js学习记录(一)
    我的Spring学习记录(三)
    我的Spring学习记录(二)
    我的Hibernate学习记录(二)
    我的Hibernate学习记录(一)
    Tomcat学习笔记
  • 原文地址:https://www.cnblogs.com/huruda/p/3434324.html
Copyright © 2011-2022 走看看