MVVM 小雛形 knockout

盡頭換生發表於2020-06-02
MVVM

前言

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 編輯器也支援提示。

相關文章