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

前言

本文适合于想快速掌握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

回到顶部