mvvm框架 - knockout快速入门
发布于 8 年前 作者 zhengnz 10321 次浏览 来自 分享

前言

本文适合于想快速掌握knockout的同学，knockout的优势在于其兼容性，ie6+啊，良心框架，不过对于无需考虑兼容性的项目，还是推荐去玩vue吧，本文通过demo+解释来分析用法和思想，并不会去列举框架中各种api，对于需要了解详细文档的同学，建议还是去官网看看吧

1. 引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

2. 简单的栗子

我们将用一段简单的代码来实现input内容改变，strong的内容跟着改变的效果

html

<input type='text' data-bind='textInput: val'>
<br />
<strong data-bind='text: val'></strong>

js

function viewModel(){
  var self = this;
  self.val = ko.observable('Hello World');
}

ko.applyBindings(new viewModel());

让我们来理解下该段代码：为了更好的兼容性，knockout使用observable来定义model的可变属性，一个model里所定义的属性，可以映射到html里。在html中，knockout通过data-bind中声明的handler和其对应的model属性来控制各元素应该做什么事，例如textInput，告诉了input元素，当在输入时即刻向val赋值，而strong里的text则告诉strong，你的文本内容来自于val，val是什么你就显示什么，那么我们通过这两个handler就能轻松的实现随着input内容的变化，strong的文本跟着变化的效果了，是不是很amazing呢？简而言之，你能通过设定的属性配合handler来控制元素

3. 给栗子加点料

接下来我们在简单的栗子的基础上，让strong的内容基于input增加点东西

html

<input type='text' data-bind='textInput: val'>
<br />
<strong data-bind='text: computed_val'></strong>

js

function viewModel(){
  var self = this;
  self.val = ko.observable('Hello World');
  self.computed_val = ko.computed(function(){
    return self.val() + ' ' + '- Author: Norman'
  });
}

ko.applyBindings(new viewModel());

这段代码与上个栗子的不同之处，在于input里的内容，在strong里会自动增加** - Author: Norman**这一字符串，这么做的原因是为了展示ko的一个计算功能，通过这个计算功能，我们能以函数的形式告诉对应的属性（该例子中为computed_val），当函数内包含的可变属性变化时，你就计算下然后赋给其对应的值，所以该例子中，随着val的改变，computed_val通过计算总是会自动加入字符串

4. “状态”

我们将观察checkbox如何控制其他元素的隐藏/显示

html

<input type='checkbox' data-bind='checked: is_checked'>
<br />
<strong data-bind='visible: is_checked'>Hello World</strong>

js

function viewModel(){
  var self = this;
  self.is_checked = ko.observable(true);
}

ko.applyBindings(new viewModel());

这段例子很简单，描述了一种状态改变来影响其他元素，在checkbox中，选中与不选中其实就是一种状态，ko里的checked这个handler就是用来绑定这个状态的，其对应的属性应为布尔值，我们在js中定义的is_checked属性默认值为true，那么运行后看到的应该是checkbox为选中状态，并且strong里的内容也是展示出来的，这时我们点击下checkbox，那么checkbox是会被取消选中的状态的，这种状态也将被checked这个handler捕获，并且将状态赋值给is_checked，那么is_checked其实就变成false了，此时strong的visible就会被因为is_checked的改变而被刷新，也就visible变成false状态了，那你就看不见我啦~如果你想我就再点一次checkbox吧

5. 简单的列表

列表在网站开发中是常见到不行的东西，下面让我们来看看如何通过knockout输出一个列表吧

html

<button data-bind='click: render'>渲染列表</button>
<br />
<ul data-bind='foreach: rows'>
  <li data-bind='text: $data'></li>
</ul>

js

function viewModel(){
  var self = this;
  self.rows = ko.observableArray([]);
  self.render = function(){
    var arr = ['作', '者', '好', '帅'];
    self.rows(arr);
  };
}

ko.applyBindings(new viewModel());

先来说说handler

click: 点击事件，绑定的属性应该是一个函数，可以理解为jquery中click里面带的函数

foreach: 循环，绑定的属性应该是一个数组，可以将该数组循环赋给子元素，此时子元素获取到的属性是列表里元素所拥有的属性

li元素的text handler里我们绑定了一个$data，这个在js代码里我们并没有看到有任何声明，$data其实是ko的一个定义，是用来获取绑定到该元素的属性本身，那么在以上代码中，数组有多少个元素，那么就会生成多少个li，并且每个li的text将会是数组中元素自身。js中我们定义rows使用到observableArray，这是定义数组可变属性的方法，默认值设为空数组，点击渲染列表后，通过self.rows(arr)这种方式将数组赋值给rows属性，则li将会被循环出来

$data这种定义，具体可以看此处

6. 对象列表

上一段我们的列表中只是简单的数组，数组内的元素都是字符串，这一段我们将来演示数组内元素为对象时如何处理

html

<button data-bind='click: render'>渲染列表</button>
<br />
<ul data-bind='foreach: rows'>
  <li data-bind='text: name'></li>
</ul>

js

function viewModel(){
  var self = this;
  self.rows = ko.observableArray([]);
  self.render = function(){
    var arr = [{
      name: 'a'
    }, {
      name: 'b'
    }, {
      name: 'c'
    }, {
      name: 'd'
    }]
    self.rows(arr);
  };
}

ko.applyBindings(new viewModel());

这段代码中我们将arr变为一个包含多个object的数组，每个object中都有name这个属性，html里，li绑定的text对应的就是这个name，上一段我们使用的$data是指定本身，而这一段我们因为包含了属性，那么直接指定属性即可，无需再写$data

回到顶部