Knockout簡單用法

    在最近做的一個項目中，頁面數據全部通過js ajax調用webapi接口獲取，也就是說頁面的數據全部使用javascript腳本填充，這就想到了使用一個MVVM模式的js框架來做這件事，在該項目中選擇了Knockout.js。下面簡單介紹一下Knockout的基本用法，作為備忘。

1 Knockout簡介

Knockout是一個輕量級的UI類庫，通過應用MVVM模式使JavaScript前端UI簡單化。

Knockout是一個以數據模型（data model）為基礎的能夠幫助你創建富文本，響應顯示和編輯用戶界面的JavaScript類庫。任何時候如果你的UI需要自動更新（比如：更新依賴於用戶的行為或者外部數據源的改變），KO能夠很簡單的幫你實現並且很容易維護。

Knockout有如下4大重要概念：

1、聲明式綁定 (Declarative Bindings)：使用簡明易讀的語法很容易地將模型(model)數據關聯到DOM元素上。

2、UI界面自動刷新 (Automatic UI Refresh)：當您的模型狀態(model state)改變時，您的UI界面將自動更新。

3、依賴跟蹤 (Dependency Tracking)：為轉變和聯合數據，在你的模型數據之間隱式建立關系。

4、模板 (Templating)：為您的模型數據快速編寫復雜的可嵌套的UI。

簡稱：KO

官方網站：http://knockoutjs.com

2 入門介紹

1、  創建不帶有監控屬性的ViewModel

創建一個view model，只需要聲明任意的JavaScript object。例如：

var myViewModel = {
    personName: 'Bob',
    personAge: 123
};

 

把該ViewModel綁定到HTMl代碼中，例如：下面的代碼顯示personName 值

The name is <span data-bind="text: personName"></span>

 

激活Knockout，需要添加如下的 <script> 代碼塊：

ko.applyBindings(myViewModel);

 

2、創建帶有監控屬性的view model

監控屬性Observables
現在已經知道如何創建一個簡單的view model並且通過binding顯示它的屬性了。但是KO一個重要的功能是當你的view model改變的時候能自動更新你的界面。當你的view model部分改變的時候KO是如何知道的呢？答案是：你需要將你的model屬性聲明成observable的, 因為它是非常特殊的JavaScript objects，能夠通知訂閱者它的改變以及自動探測到相關的依賴。
例如：將上述例子的view model改成如下代碼：

var myViewModel = {
    personName: ko.observable('Bob'),
    personAge: ko.observable(123)
};

 

你根本不需要修改view – 所有的data-bind語法依然工作，不同的是他能監控到變化，當值改變時，view會自動更新。

3 使用Knockout

在我們的系統中，每一個頁面都會定義一個ViewModel，該ViewModel存儲頁面所有的數據，並通過ajax讀取數據並填寫ViewModel。

假如我們有一個班級的頁面，定義如下一個ViewModel：

//定義視圖
var ClassViewModel = {
    ClassID:ko.observable(),//班級ID
    ClassName: ko.observable(),//班級名稱
    ClassMasterName: ko.observable(),//班主任 
    Students: ko.observableArray(),//班級學生列表  綁定數組
};

$(document).ready(function () {
    //綁定
    ko.applyBindings(ClassViewModel);
    //添加學生信息
    $("#AddStudent").on("click", function () {
        var obj = new Object();
        obj.StuName = "楊過";
        obj.StuSex = "猛男";
        obj.StuAge = "100";
        ClassViewModel.Students.push(obj);
    });
});

//ajax獲取班級信息,並給ViewModel賦值
$.post("/home/GetClassInfo", function (data) {

    ClassViewModel.ClassID(data.ClassID);//班級ID賦值，會直接映射到界面
    ClassViewModel.ClassName(data.ClassName);
    ClassViewModel.ClassMasterName(data.ClassMasterName);

    //獲取學生信息
    for (var i = 0; i < data.StuList.length; i++) {
        var obj = new Object();
        obj.StuName=data.StuList[i].StuName;
        obj.StuSex=data.StuList[i].StuSex;
        obj.StuAge = data.StuList[i].StuAge;

        ClassViewModel.Students.push(obj);
    }
})

 

對應的Html代碼：

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<script src="~/Scripts/ViewModel/MyClassViewModel.js"></script>
<h2>MyClass</h2>

<!-- attr屬性綁定 -->
班級名稱：<span data-bind="text:ClassID,attr:{'ID':ClassID}"></span><br/>
班主任：<span data-bind="text:ClassName"></span><br/>

<table>
    <tr>
        <th>
            名字
        </th>
         <th>
            性別
        </th>
         <th>
            年齡
        </th>
    </tr>
    <!--循環綁定 Students -->
    <tbody data-bind="foreach:Students">
        <tr>
            <td data-bind="text:StuName">

            </td>
            <td data-bind="text:StuSex">

            </td>
            <td data-bind="text:StuAge">

            </td>
        </tr>
    </tbody>
</table>
<br/>
<input type="button" id="AddStudent" value="添加學生" />

 

后台數據：

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "修改此模板以快速啟動你的 ASP.NET MVC 應用程序。";

            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "你的應用程序說明頁。";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "你的聯系方式頁。";

            return View();
        }

        public ActionResult MyClass()
        {
            return View();
        }

        public JsonResult GetClassInfo()
        {
            MyClass myClass = new MyClass();
            myClass.ClassID = "jsj001";
            myClass.ClassName = "計算機一班";
            myClass.ClassMasterName = "龍龍";
            myClass.StuList = new List<Students>();
            myClass.StuList.Add(new Students() { StuAge = "10", StuName = "張三", StuSex = "暖男" });
            myClass.StuList.Add(new Students() { StuAge = "20", StuName = "李四", StuSex = "暖男" });
            myClass.StuList.Add(new Students() { StuAge = "30", StuName = "王五", StuSex = "暖男" });
            return Json(myClass);
        }

    }

    public class MyClass
    {
        /// <summary>
        /// 班級ID
        /// </summary>
        public string ClassID { get; set; }
        /// <summary>
        /// 班級名稱
        /// </summary>
        public string ClassName { get; set; }
        /// <summary>
        /// 班主任名稱
        /// </summary>
        public string ClassMasterName { get; set; }
        public List<Students> StuList { get; set; }
    }

    public class Students
    {
        public string StuName { get; set; }
        public string StuSex { get; set; }
        public string StuAge { get; set; }
    }

 

其他博文：MVC3.0+knockout.js+Ajax 實現簡單的增刪改查

本文參考：http://www.cnblogs.com/TomXu/archive/2011/11/21/2256749.html