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