MVVM 小雛形 knockout

前言

knockout學過的當工具腳本用，就像jquery同樣使用，學習成本15分鐘，沒學過的可學可不學。

knockout 是上古神器，話說在遠古開天闢地，前端處處是飛禽走獸，一片混亂。

這時候人類開始人類開始誕生了，由於惡劣的環境備受煎熬，在生存角逐中，人們經過智慧寫了各類js腳本，進入了石器時代，可是人類只有兩條腿和兩隻手切換工具的速度限制了人類的發展。

這時候John Resig 整理了各類工具，注入熔爐，一件草莽神器誕生了，jquery。人們開始利用jquery，在html上開墾大地，馬力十足，這是一個被jquery奴隸的時代，史稱奴隸時代。

後來人們就發現了一個問題，在html中這塊廣袤的大地上，js不一樣腳本是衝突的，部落與聯盟之間的戰爭一觸即發。隨着由於衝突，調試繁瑣，js的部落與部落之間在戰爭中，被require.js等模塊管理所統治，不一樣的部落獲得分封，進入了封建時代。

可是幾乎在同一時間，mvvm思想開始萌芽，他們提出有一個假設，若是能夠修改數據就能對html產生驅動變化，那麼是否是能夠解放生產力？這個實現不斷獲得驗證與實際，工業革命誕生了。這是一次沒有流血的革命，由於之前的技術誕生每每充滿着爭議，這個是真的解放人類的雙手，蒸汽時代開始來臨。

knockout 就是蒸汽時代的產物，它是mvvm模式在js實現的前驅，是如今電力時代3大框架的基石。好了，故事模式結束。

正文

首先說明一下什麼是mvvm，它是一種模式，還有一些其餘模式好比說mvc，mvp等等。

他們實際上是一個重的問題，偏向於哪一塊。

mvc的c很重，那麼它的重點功能在於控制器，能夠說是c鏈接了視圖和model。

mvp的p很重，他們的視圖和model徹底分離，中間p的其實至關於c，操做層，可是和mvc不一樣的是隔離了model層和視圖。好比說window form開發。

mvvm，偏向view，和mvp徹底相反，他的視圖和數據層至關緊密，二者不可分割。knockout就是一個例子，包括如今比較成熟的框架vue。

knockout它的做用就是一個重要功能在於監聽，監聽數據的變化，而後重新部分渲染。

那麼開始實踐一下吧:

public class Product
{
	public int Id { get; set; }
	public string Name { get; set; }
	public string Category { get; set; }
	public decimal Price { get; set; }
}

一個model類，裏面存放這id，name，category，price，對應數據庫。

而後編輯控制器:

public class HomeController : Controller
{
	static List<Product> productsList = new List<Product>();
	public IActionResult Index()
	{
		return View();
	}

	[HttpGet]
	public IActionResult products() {

		productsList = new List<Product>() {
			new Product{Id=1,Category="哈哈",Name="張三",Price=10 },
			new Product{Id=2,Category="哈哈",Name="李小二",Price=10 }
		};
		return Json(productsList);
	}
}

這裏面只是提供一些數據:

前臺:
html部分

<table id="products">
    <thead>
        <tr><th>ID</th><th>Name</th><th>Category</th><th>Price</th></tr>
    </thead>
    <tbody data-bind="foreach: products">
        <tr>
            <td data-bind="text: id"></td>
            <td data-bind="text: name"></td>
            <td data-bind="text: category"></td>
            <td data-bind="text: price"></td>
        </tr>
    </tbody>
</table>

js 部分:

function ViewModel() {
	var self = this;
	//建立綁定
	self.products = ko.observableArray(); // 建立數組綁定。
	self.product = ko.observable();//單個產品
	self.status = ko.observable();//單個錯誤提示
	// 獲得所有的產品
	self.getAll = function () {
		self.products.removeAll();
		$.getJSON("/Home/products", function (products) {
			self.products(products);
		});
	}
	//更新
	self.update = function () {
		self.status("");
		var id = $('#productId').val();
		var product = {
			Name: $('#name').val(),
			Price: $('#price').val(),
			Category: $('#category').val()
		};
		$.ajax({
			url: '/Home/products/' + id,
			cache: false,
			type: 'PUT',
			contentType: 'application/json; charset=utf-8',
			data: JSON.stringify(product),
			success: self.getAll
		})
			.fail(
				function (xhr, textStatus, err) {
					self.status(err);
				});
	}
	//新增
	self.create = function () {
		self.status("");
		var product = {
			Name: $('#name2').val(),
			Price: $('#price2').val(),
			Category: $('#category2').val()
		};
		$.ajax({
			url: '/Home/products',
			cache: false,
			type: 'POST',
			contentType: 'application/json; charset=utf-8',
			data: JSON.stringify(product),
			statusCode: {
				201 /*Created*/: function (data) {
					//獲得返回結果真後返回添加添加
					self.products.push(data);
				}
			}
		})
			.fail(
				function (xhr, textStatus, err) {
					self.status(err);
				});
	}
	//初始化
	self.getAll();
}

$(function () {
	var viewModel = new ViewModel();
	ko.applyBindings(viewModel);
})

在裏面配置增刪改查便可，裏面配置的方法能夠在html這樣寫自動綁定:

<button data-bind="click: $root.create">添加</button>

就會觸發裏面的create 方法。

這裏只是做爲一個綁定用例，其實在真正的編輯中是所有綁定的，不會出現這種$('#productName').val();

而是使用:

<input data-bind="value: $root.Name" type="text" title="Name" />

在此就很少複述。

效果:

總結

感受 knockout 也不是徹底過期，小型的開發速率仍是很是快的，綁定就完事，源碼也少，vs 編輯器也支持提示。