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它的作用就是一个主要功效在于监听,监听数据的转变,然后重新部门渲染。

4种移动端适配方法

那么最先实践一下吧:

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" />

在此就不多复述。

效果:

MVVM 小雏形 knockout

总结

感受 knockout 也不是完全过时,小型的开发速率照样非常快的,绑定就完事,源码也少,vs 编辑器也支持提醒。

原创文章,作者:admin,如若转载,请注明出处:https://www.2lxm.com/archives/13474.html