knockout简介
前言
这一段时间，公司要完善一些代码，有幸接触到了knockout，knockout框架（以下简称KO）是微软推出的一款MVVM的框架，一说起微软就会联想起万恶的IE系列，对于开发人员来说是折磨的，当然，KO是微软的儿子，自然而然的选择了要跟大家和谐相处，所以，KO最低可以兼容到IE6。
讲述的目的是能够让大家明白使用方法，所以追求极简代码。
#为什么使用MVVM框架
相信刚入这一行不久的部分开发人员都很郁闷，为什么要使用框架，对于我个人而言，我认为每有一个框架都要学习，这个代价不如自己进行开发。当然，在此之前我没有开发过大一些的系统或是应用，直到接触到了这些以后，才会明白。
我个人的思想，使用一款框架之前需要给自己做一个假设，我为什么要使用这个框架，框架是否能够帮助我简化开发，也就是我们需要很了解框架的构成，这一点很重要。当然了，这个想法不适用于初学者或者是老手，适用于了解一部分框架而囫囵吞枣使用的人，不能否认，我不喜欢学习框架 。! - - !
knockout到底是很么
前面提到了KO是一款MVVM框架，如今MVVM框架也已经很是盛行了，例如angular、react、vue等等。我头一次接触ko的时，其实不明白什么是MVVM框架，所以，在这里我想稍微借鉴百度说一下什么是MVVM框架。
MVVM是Model-View-ViewModel的简写，是MVC框架的改进版，MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。
百度百科MVVM传送门
就KO框架来说，M - V - VM表现为：
<!-- VM 真正的核心，数据层向视图层的过程，ko已经帮助你封装好了 -->
<script type="text/javascript" src="konckout-3.5.0.min.js"></script>
<!-- 这就是 V 层的表现 -->
<body>
<div data-bind="text: name"></div>
<div data-bind="text: age"></div>
</body>
<!-- 这就是 M 层的表现，当然没有连接数据库，自定义数据 -->
<script>
var data = [{ name: '张三', age: '18' }]
var viewModel = {
name: ko.observable('张三'),
age: ko.observable('18')
}
ko.applyBindings(viewModel);
viewModel.name(data[0].name).age(data[0].age);
</script>
我们直白一点，从上述页面的描述中可以看出，ko框架所做的工作就是将DATA数据与DOM元素搭上关系，能够由数据直接操控页面的行为，这样方便开发人员能够专注于数据处理，而对于DOM操作则交给了ko框架，简化了开发
knockout的使用
我们之前了解到ko所做的工作，现在我们来聊聊它的使用。如同所有代码一样，想要使用ko，就需要对其进行入口配置，
ko.applyBindings(viewModel) && ko.applyBindings(new viewModel())
可以看出ko可以接收两种值，对象和函数
var viewModel = {
name: ko.observable('张三'),
age: ko.observable('18')
}
&&
var viewModel = function(){
this.name = ko.observable('张三');
this.age = ko.observable('18');
}
在这里我们可以看出，对象（方法）的目的是为了将数据输出
<div data-bind="text: name"></div>
<div data-bind="text: age"></div>
最后，我们进行数据的绑定。
有一点值得一提，大多数MVVM框架的绑定绑定分为 none/one-way/two-way，而ko并没有one-way（单向绑定），所有的绑定都是双向绑定。
358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
