初识KnockoutJS

最新推荐文章于 2024-04-08 18:03:49 发布

Edwin_

最新推荐文章于 2024-04-08 18:03:49 发布

阅读量412

点赞数

分类专栏： FrontEnd 文章标签： Knockout

本文链接：https://blog.csdn.net/Edwin_/article/details/76883440

版权

FrontEnd 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1. Knockout简介 (Introduction)

Knockout是一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化。

Knockout有如下4大重要概念：

声明式绑定 (Declarative Bindings)：使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。

UI界面自动刷新 (Automatic UI Refresh)：当您的模型状态(model state)改变时，您的UI界面将自动更新。

依赖跟踪 (Dependency Tracking)：为转变和联合数据，在你的模型数据之间隐式建立关系。

模板 (Templating)：为您的模型数据快速编写复杂的可嵌套的UI。

简称：KO

官方网站：http://knockoutjs.com

2. 入门介绍 (Getting started)

KO工作原理及带来的好处

Knockout是一个以数据模型（data model）为基础的能够帮助你创建富文本，响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新（比如：更新依赖于用户的行为或者外部数据源的改变），KO能够很简单的帮你实现并且很容易维护。

重要特性:

优雅的依赖追踪- 不管任何时候你的数据模型更新，都会自动更新相应的内容。
声明式绑定- 浅显易懂的方式将你的用户界面指定部分关联到你的数据模型上。
灵活全面的模板- 使用嵌套模板可以构建复杂的动态界面。
轻易可扩展- 几行代码就可以实现自定义行为作为新的声明式绑定。

额外的好处：

纯JavaScript类库 – 兼容任何服务器端和客户端技术
可添加到Web程序最上部 – 不需要大的架构改变
简洁的 – Gzip之前大约25kb
兼容任何主流浏览器 (IE 6+、Firefox 2+、Chrome、Safari、其它)
Comprehensive suite of specifications （采用行为驱动开发） - 意味着在新的浏览器和平台上可以很容易通过验证。

开发人员如果用过Silverlight或者WPF可能会知道KO是MVVM模式的一个例子。如果熟悉 Ruby on Rails 或其它MVC技术可能会发现它是一个带有声明式语法的MVC实时form。换句话说，你可以把KO当成通过编辑JSON数据来制作UI用户界面的一种方式… 不管它为你做什么

3. 接下来是个基本的小例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form>
        <input data-bind="value:name,valueUpdate:'input',event:{change:autoSave}" />
        <p>Your name:
            <!--ko text: name-->
            <!--/ko-->
        </p>
    </form>
    <script src="knockout.js"></script>
    <script type="text/javascript">
        var user = {};

        user.name = ko.observable();

        user.autoSave = function () {
            alert(user.name())
        }

        ko.applyBindings(user, document.querySelector('body'))
    </script>
</body>

</html>

当你在输入框中输入字符的时候，Your name处就会显示你所输入的内容，并且当你从输入框blur的时候，也会触发autoSave方法。

我们只用操纵对象user就能引起页面上的变化

例子完整代码：https://github.com/edwin-su/front-end/tree/master/Knockout/Knockout%20Example1