knockout --- foreach -- 前端必备

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

 

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

 

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

 

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

 

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

 

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

 

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

 

　　看效果图：

 

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

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

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