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

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM