使用Knockout 綁定簡單 json 對象


近期 KO 這個js框架貌似要火,所以簡單的學習了下,園子中的參考文章:

http://www.cnblogs.com/n-pei/archive/2011/12/23/2299217.html 

湯姆大叔的博客 KNOCKOUT 系列文章

為了方便查閱,將大叔的這個系列文章 做成了CHM 有需的朋友們 請進入 傳送點

 

綁定實體類數據

 

Html Form :

<form id="xxoo">
      姓名:<input type="text" data-bind="value:truename" name="truename" id="txtTruename" />
      Email:<input type="text" data-bind="value:email" name="email" id="txtemail" />
</form>

 還有很多的屬性,這里就不略過啦~~~

 

js Code:

  要使用ko 進行數據綁定,需要構造適合KO的對象。如下方式:

var viewModel={
      truename:ko.observable("瘋狂秀才"),
      email:ko.objservable('1055818239@qq.com')
}

  當然,我們在后端代碼也可以生成這樣的json。如果不在后端寫相關的程序,使用JSON.NET 將實體生成JSON對象是不符合KO使用的。所以

我們需要在前端用JS 將實體對象構造成適合KO 使用的對象。你可以手寫成上面的樣子,但如果屬性很多的話,很煩的,所以我們可以寫個通用的方法。

 作法:

function bindData(modelObj){
   if (modelObj) {
        var viewModel = {};
        for (var item in modelObj) {
            viewModel[item] = ko.observable(modelObj[item]);
        }

        ko.applyBindings(viewModel);
   }
}

  這樣就好啦,你有多少屬性我都不怕啦~~,一個方法寫好,處處作法!省力省心啊!

上面的方法針對你的邏輯可能會有問題,你可以稍作修改。這個應該難不到陪明的你,我看好你哦!

 

對啊,忘記說,要首選引入knockout.js 這個可以在 官網的首頁下載

 

 

 

 


免責聲明!

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



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