Knockout簡單用法

時間 2019-11-17

標籤 knockout 簡單用法简体版

原文原文鏈接

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

1 Knockout簡介

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

Knockout是一個以數據模型（data model）爲基礎的可以幫助你建立富文本，響應顯示和編輯用戶界面的JavaScript類庫。任什麼時候候若是你的UI須要自動更新（好比：更新依賴於用戶的行爲或者外部數據源的改變），KO可以很簡單的幫你實現而且很容易維護。前端

Knockout有以下4大重要概念：java

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

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

三、依賴跟蹤 (Dependency Tracking)：爲轉變和聯合數據，在你的模型數據之間隱式創建關係。ajax

四、模板 (Templating)：爲您的模型數據快速編寫複雜的可嵌套的UI。api

簡稱：KO數組

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

2 入門介紹

一、建立不帶有監控屬性的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);

二、建立帶有監控屬性的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; }
    }