KnockoutJS用法 html+js实现mvvm
KnockoutJS用法 html+js实现mvvm
最近在改版博客程序的时候因为强迫症的关系接触到了Knockout.js,感觉就像发现了新天地一样,学海无涯,只有你不敢想没有人家做不到的。 玩过wpf的都知道它的MVVM双向绑定机制 可以说减少了很多代码量 而且代码也美观很多,最让我喜欢的就是模型和数据双向绑定 避免了对数据的二次赋值操作
在接触过Knockout.js 相关的东西后发现原来网页也是可以实现类似这种效果,本博客左上角的搜索框就应用这个模式,觉得它真心不错,虽然和后端体验还是有些许差距但双向绑定的机制简直不要太爽。
引述:
一、Knockout.js简介
- 声明式绑定 (Declarative Bindings):使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。
- UI界面自动刷新 (Automatic UI Refresh):当您的模型状态(model state)改变时,您的UI界面将自动更新。
- 依赖跟踪 (Dependency Tracking):为转变和联合数据,在你的模型数据之间隐式建立关系。
- 模板 (Templating):为您的模型数据快速编写复杂的可嵌套的UI。
- 免费,开源纯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();
}
});
}
});
下面是本站实现的效果图