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 编辑器也支持提示。