knockout.js简单实用教程1

时间：2021-02-10 03:52:42

第一次接触knockout是在一年多之前吧。当时是接手了一个别人的项目，在项目中有用到knockout来进行数据的绑定。也就开始学习起来knockout。在之后的项目中也多次用到了这个。在第一次开始学习的时候也遇到了一些困难。所以呢想写一篇比较入门的教程让大家来了解和使用knockout,其实所有的使用方法都可以去官网的文档里去查看里面写的很详细。我这里呢是为了那些还不习惯看英文文档并且刚入门的人看得（PS：坏习惯得改啊因为大部分文档都是英文的）

废话不多说了。先简单说明一下是knockout ，knockout.js是一个轻型的MVVM前台框架，说简单一点就是用来绑定数据的。它的优点是如果数据源发送改变那么它会自动刷新数据,而不需要你手动的再次绑定,第二个好处前后台代码的分离也就是MVVM的思想吧。以为ASP.NETMVC为例吧。在ASP.NETMVC中如果你需要绑定数据你要怎么做，以往的做法是把数据给到viewdata里面，然后在前台用razor语法进行绑定也就是通过后台代码进行绑定。但是它带来的问题是你需要加各种判断来去除为空的情况，否则就会出现讨厌的黄页了。而且你没办法异步的刷新页面.而通过knockout你就完全不需要考虑这个问题了，这也就是MVVM带来的好处。我只需要处理json数据就行了。关于介绍就说这么多了。其他的好处你们在使用中慢慢体会吧.

在是用knockout之前，你需要了解几个概念

首先是Viewmodel 这个模型和MVC的model不是一个东西。这个viewmodel一个JS对象

像这样的

var myViewModel = {

    personName: 'Bob',

    personAge: 123

};

在一个页面中你可以声明多个VM模型。但是我不建议这么做。原因后面我会讲到。

knockout绑定的基本语法是

The name is <span data-bind="text: personName"></span>

在标签中直接打上属性data-bind来实现绑定。支持文本绑定，html绑定，属性绑定，css绑定等等。我就不一一列举了想要了解详情的同学可以去knockout官网查看地址是 http://knockoutjs.com/documentation/introduction.html

knockout的语法是非常的灵活的。很多语法当你不知道怎么写的时候你可以试试就按你平时写后台代码的语法试试说不定就可以了。当然查官方文档还是最快的方式了。

上面的绑定还差最后一步那就是

ko.applyBindings(myViewModel);

把模型绑定到document里,当然你也可以把数据绑定到具体的document对象上比如,div,table之类语法和上面的类型

ko.applyBindings(myViewModel,document.getElementById("具体的dom对象的id"));

上面的这边绑定方式呢比较死。因为数据是写死的那如何动态的绑定呢？也就是数据源改变了页面自动更新 ,这里就要介绍observables语法了 observables简单来说就是自动绑定。如果元数据改变了的话它会自动更新它自己。下面给个列子

// 当前模型

var ViewModel = function(first, last) {

    this.firstName = ko.observable(first);

    this.lastName = ko.observable(last);

    this.fullName = ko.pureComputed(function() {

        // 当firstname改变是会更新模型

        return this.firstName() + " " + this.lastName();

    }, this);

};

ko.applyBindings(new ViewModel("Planet", "Earth")); //给定初始值并进行绑定

这个是JS创建模型和模型绑定的代码相信大家能看的明白。简单说明一下大概的意思就是创建一个模型。模型有两三个字段其中两个通过自动绑定标识的也就意味着当他被改变的时候模型会自动更新。也就意味着。第三个字段会自动进行更新。下面给出绑定代码。

<p>First name: <input data-bind="value: firstName" /></p>

<p>Last name: <input data-bind="value: lastName" /></p>

<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

在这个地址 http://jsfiddle.net/rniemeyer/bxfXd/ 可以调试这个代码.  相信看完这段代码大家能明白什么是自动更新数据了吧.

一般呢在页面上我们还需要给dom对象绑定上事件。那么在knockout里面是怎么绑定事件的呢？下面给出说明，照例先贴出来一段代码

var ClickCounterViewModel = function() {

    this.numberOfClicks = ko.observable(0);

    this.registerClick = function() {

        this.numberOfClicks(this.numberOfClicks() + 1);

    };

    this.resetClicks = function() {

        this.numberOfClicks(0);

    };

    this.hasClickedTooManyTimes = ko.pureComputed(function() {

        return this.numberOfClicks() >= 3;

    }, this);

};

ko.applyBindings(new ClickCounterViewModel());

上面的代码。相信大家也都能看的明白。很简单的逻辑就用来统计点击次数。如果用面向对象的思想来看的话。就是说一个“对象”有各种各样的属性，比如姓名啊性别啊之类 称之为对象的属性。也有各种的行为，比如吃饭啊走路啊。这称之为对象的行为。这里的属性对象对象的就是ko(knockout后文中都以此来替代)的字段了，对象的行为也就是ko里面的js事件了。绑定ko的话可以称为对象的初始化. 以上这些解释呢是为了让读者能更方面的理解ko的模型的含义。说了这么多那怎么绑定事件呢？下面给出dom绑定的代码

<div>You've clicked <span data-bind='text: numberOfClicks'>&nbsp;</span> times</div>

<button data-bind='click: registerClick, disable: hasClickedTooManyTimes'>Click me</button>

<div data-bind='visible: hasClickedTooManyTimes'>

    That's too many clicks! Please stop before you wear out your fingers.

    <button data-bind='click: resetClicks'>Reset clicks</button>

</div>

同上也给出调试的地址 http://jsfiddle.net/rniemeyer/3Lqsx/

相信看完上面的内容。大家对ko已经有了一定的了解了 下面在说明如何绑定json对象。这也是我们用的最多的方式了。这里在结合前面的绑定方式做一个总的例子,

下面的例子中有绑定事件,绑定简单数据和数组集合.废话不多说直接上代码.

第一步当然还是创建模型对象了

var SimpleListModel = function(items) {

    this.items = ko.observableArray(items);

    this.itemToAdd = ko.observable("");

    this.addItem = function() {

        if (this.itemToAdd() != "") {

            this.items.push(this.itemToAdd()); // 把你输入的文本插入到数组里.

            this.itemToAdd(""); // 清空itemtoadd字段的文本内容

        }

    }.bind(this);

};

ko.applyBindings(new SimpleListModel(["Alpha", "Beta", "Gamma"]));//这里可以进行初始化你可以把你拿到的json数据直接丢进去就行了

在创建这个模型对象的时候我对第一个属性的类型的声明为 ko.observableArray() ，上面的例子用的是ko.observable 他们两个的区别的是 绑定单个字符还是绑定数组集合，只有这点区别。其他的都是一样的，你要是把VM当做一个对象来处理就更好理解了。就是相当于对象里字段的类型一个是int 一个是list<int>。

下面直接给出绑定dom的代码

<form data-bind="submit: addItem">

    New item:

    <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />

    <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>

    <p>Your items:</p>

    <select multiple="multiple" width="50" data-bind="options: items"> </select>

</form>

调试地址http://jsfiddle.net/rniemeyer/bxfXd/

相信看过之前的内容后看这个绑定的话应该也可以容易理解了。从这里也可以看出来ko的语法是非常灵活的。可以非常随意的去写。这也是脚本语言的优势。

看到这里大家应该对ko的整体和简单的使用有了一定的了解，也肯定会有很多的疑问（可以直接文章下面留言提出来）。但是到这并没有结束。在以后的时间里我会继续完成这一系列的关于ko的教程。这其中很多内容我是参考了官方的文档来编写的。也有我的一些理解在里面如有不足之处请见谅。

knockout.js官方下载地址 http://knockoutjs.com/downloads/index.html

相关文章