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 探讨。

　　

 

转载于:https://www.cnblogs.com/huruda/p/3434324.html