knockout.js开始使用knockout.js


备注

本节概述了knockout.js是什么,以及开发人员为什么要使用它。

它还应该提到knockout.js中的任何大型主题,并链接到相关主题。由于knockout.js的文档是新的,您可能需要创建这些相关主题的初始版本。

版本

笔记发布日期
3.4.2 Bug修复 2017年3月6日
3.4.1 Bug修复 2016年11月8日
3.4.0 二〇一五年十一月十七日
3.3.0 2015年2月18日
3.2.0 引入component绑定 2014年8月12日
3.1.0 2014年5月14日
3.0.0 另请参阅: 升级(来自2.x)备注 2013年10月25日
2.3.0 最后2.x版本 2013年7月8日
2.0.0 2011-12-21
1.2.1 最后1.x版本 2011-05-22
1.0.0 2010-07-05

计算的可观测量

计算的可观察对象是可以“观察”或“反应”视图模型上的其他可观察对象的函数。以下示例显示了如何显示用户总数和平均年龄。

注意:下面的示例也可以使用pureComputed() (在v3.2.0中引入),因为函数只是根据其他视图模型属性计算某些内容并返回一个值。

<div>
  Total Users: <span data-bind="text: TotalUsers">2</span><br>
  Average Age: <span data-bind="text: UsersAverageAge">32</span>
</div>
 
var viewModel = function() {

    var self = this;

    this.Users = ko.observableArray([
        { Name: "John Doe", Age: 30 },        
        { Name: "Jane Doe", Age: 34 }
    ]);

    this.TotalUsers = ko.computed(function() {
        return self.Users().length;
    });

    this.UsersAverageAge = ko.computed(function() {
        var totalAge = 0;
        self.Users().forEach(function(user) {
            totalAge += user.Age;
        });
   
        return totalAge / self.TotalUsers();
    });
};

ko.applyBindings(viewModel);
 

入门:Hello world!

创建HTML文档并启用knockout.js

创建一个HTML文件,并通过<script> 标记包含knockout.js

<!DOCTYPE html>
<html>
<head>
    <title>Hello world! (knockout.js)</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
</body>
</html>
 

在挖空脚本添加第二个<script> 标记。在此脚本标记中,我们将初始化视图模型并将数据绑定到我们的Document。

<script>
  var ViewModel = function() {
    this.greeting = ko.observable("Hello");
    this.name = ko.observable("World");

    this.appHeading = ko.pureComputed(function() {
      return this.greeting() + ", " + this.name() + "!";
    }, this);
  };

  var appVM = new ViewModel();

  ko.applyBindings(appVM);
</script>
 

现在,通过向正文添加一些HTML来继续创建视图

<section>
  <h1 data-bind="text: appHeading"></h1>
  <p>Greeting: <input data-bind="textInput: greeting" /></p>
  <p>Name: <input data-bind="textInput: name" /></p>
</section>
 

打开HTML文档并执行脚本时,您将看到一个显示Hello,World的页面 。当您更改<input> 元素中的单词时, <h1> 文本会自动更新。


创建的文件如何工作

  1. 从外部源(cdnjs)加载了敲除的调试版本

码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
 
  1. 创建具有可观察属性的viewmodel实例。这意味着淘汰赛能够检测到变化并相应地更新UI。

码:

var appVM = new ViewModel();
 
  1. Knockout检查DOM的data-bind 属性,并使用提供的viewmodel更新UI。

码:

ko.applyBindings(appVM);
 
  1. 当遇到text 绑定时,knockout使用属性的值,因为它在绑定的viewmodel中定义以注入文本节点:

码:

<h1 data-bind="text: appHeading"></h1>
 

安装或设置

Knockout可在大多数JavaScript平台上使用,也可作为独立脚本使用。

包含在脚本中

您可以从其下载页面下载该脚本,然后将其包含在带有标准script tag 页面中

<script type='text/javascript' src='knockout-3.4.0.js'></script>

使用CDN

您还可以从Microsoft CDN或CDNJS中包含淘汰赛

<script type='text/javascript' src='//ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>

要么

<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js'></script>

从npm安装

npm install knockout
 

您可以选择添加--save 参数以将其保存在package.json 文件中

从凉亭安装

bower install knockout
 

您可以选择添加--save 参数以将其保存在bower.json 文件中

从NuGet安装

Install-Package knockoutjs