『QQ:1353814576』

KnockoutJS用法 html+js实现mvvm


KnockoutJS用法 html+js实现mvvm

最近在改版博客程序的时候因为强迫症的关系接触到了Knockout.js,感觉就像发现了新天地一样,学海无涯,只有你不敢想没有人家做不到的。 玩过wpf的都知道它的MVVM双向绑定机制 可以说减少了很多代码量 而且代码也美观很多,最让我喜欢的就是模型和数据双向绑定 避免了对数据的二次赋值操作

在接触过Knockout.js 相关的东西后发现原来网页也是可以实现类似这种效果,本博客左上角的搜索框就应用这个模式,觉得它真心不错,虽然和后端体验还是有些许差距但双向绑定的机制简直不要太爽。

引述:

一、Knockout.js简介

  1. 声明式绑定 (Declarative Bindings):使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。
  2. UI界面自动刷新 (Automatic UI Refresh):当您的模型状态(model state)改变时,您的UI界面将自动更新。
  3. 依赖跟踪 (Dependency Tracking):为转变和联合数据,在你的模型数据之间隐式建立关系。
  4. 模板 (Templating):为您的模型数据快速编写复杂的可嵌套的UI。
  5. 免费,开源纯JavaScript的 - 可跟jQuery的或其他JavaScript框架兼容,缩小的版本只有40KB,HTTP压缩后只有14KB跨浏览器!支持IE6+, FF2, Chrome, Opera, Safari

二、Knockout的特性以及好处 特性: 优雅的依赖跟踪 声明式绑定 灵活全面的模板 轻易可扩展

好处: 纯javascript类库(兼容任何服务器端和客户端技术) 可添加到web程序最上部(不需要大的架构改变) 简洁的 兼容任何主流浏览器

三、如何使用knockout。js 首先声明你的数据作为一个javascript模型对象(model object),然后dom元素或者模板(templates)绑定到它上面。 这里以本博客的搜索为例 下面简介怎样简单使用knockout.js例子

1、现在官网下载最新的knockout.js, 地址: http:www.knockoutjs.com

2、引入knockout.js应注意那些问题

1)用标签 //整个放在html文本后面,卸载head里面读取不到js,所以 绑定不到值 3)下面是声明式绑定的一个小例子

Html前端代码

<section id="search" class="alt">
                    <div>
                        <input type="text" name="query" id="query" placeholder="搜索博客" 
						autocomplete="off" />
                    </div>

                    <ul data-bind="foreach: QueryList" style="list-style-type: decimal;">
                        <li><a href="#" data-bind="text: Title,click:$root.Click"></a></li>
                    </ul>
</section>
	 
	 
<script src="jquery.min.js"></script>
<script src="knockout-3.5.1.js"></script>

//js部分代码

//定义ViewModel
  var viewModel = {
		QueryList: ko.observableArray(),
		Click: function (item, event) {
			var url = item.url;
			window.open(url, "_blank").location
			//window.location.href = url;
		}
	}
	ko.applyBindings(viewModel);
	$("#query").on("keyup", function () {
		var value = $(this).val();
		if (value == "" || value.length<2) {
	   	//清空队列
			viewModel.QueryList.removeAll();
			return;
		} else {
			var url = '/search' + value;
			$.post(url, function (data, status) {
				viewModel.QueryList.removeAll();
				for (var i = 0; i < data.length; i++) {
					viewModel.QueryList.push(data[i]);
					var zz = viewModel.QueryList();
				}
			});
		}
	});

下面是本站实现的效果图 KnockoutJS用法 html+js实现mvvm