knockout --- foreach -- 前端必备

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

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

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

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

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

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

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

　　看效果图：

knockout --- foreach -- 前端必备

1.前端代码：

 <div class="modal-body" data-bind="foreach: job">

                     <div>

                         <div class="panel-group" id="accordion">

                             <div class="panel panel-default">

                                 <div class="panel-heading">

                                     <h4 class="panel-title">

                                         <a data-toggle="collapse" data-toggle="collapse"

                                             data-bind="text:title" data-parent="#accordion"

                                             href="#collapseOne"> </a>

                                     </h4>

                                 </div>

                                 <div id="collapseOne" class="panel-collapse collapse in">

                                     <div class="panel-body" data-bind="html:content"></div>

                                 </div>

                             </div>

                         </div>

                     </div>

                 </div>

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 少了以前的感觉了。

欢迎拍砖，转载请标明出处！

秒客网

knockout --- foreach -- 前端必备

相关文章