KnockoutJS入门指南：第1部分

KnockoutJS入门指南：基础知识和可观察性

几乎每个与Web技术打交道的人都知道jQuery，或者至少听说过它。 它无与伦比的简单性和简洁性使全世界数百万Web开发人员的生活变得更加轻松，这真是太棒了。

不幸的是，jQuery并非解决每个问题。 一旦决定创建一些更复杂的Web应用程序，就会遇到问题–没有简单的方法来使UI和数据彼此动态通信。 使用jQuery提供的低级DOM操作和事件处理，这很难实现。 您需要一个库，为您提供UI与基础数据模型之间更复杂的通信方式。

这就是Knockout的用处 。Knockout是一个JavaScript库，可帮助创建丰富的，类似于桌面的Web UI。 它简化了用户交互，并使界面完全响应任何数据源更改。 淘汰赛提供了一种简单的双向绑定机制，可将数据模型链接到UI，从而使它们之间的同步变得轻而易举。

尽管您需要同时使用jQuery的Knockout，但在某些情况下，例如动画过渡，Knockout本身并不依赖于它。 您需要了解的另一件事是，Knockout不能与jQuery竞争-它们都做得很好。 每个人都有自己的方向。 如您所见，如果您想获得最大的利益，则应将它们一起使用。

在本教程中，我们从Knockout的核心概念和功能入手。 在第二部分中，我们将更深入地研究内置绑定以及如何使用它们。 最后，我们将介绍一些高级功能和技术，例如扩展的可观察对象以及如何创建自己的自定义绑定。 让我们开始吧！

基本概念

在阅读代码示例之前，您可能首先需要掌握一些基本概念。 淘汰赛为JavaScript实现了模型-视图-视图模型（MVVM）设计模式。 在这种模式下，您的应用程序分为三个部分：

保存您的应用程序数据的模型。 这可以是用户输入的数据，也可以是从Web服务器获取的JSON数据。

一个视图，用作模型和视图之间的连接器和通信层。 它包含数据和用于操纵此数据的操作，并将其显示在UI中。 每次更改数据模型时，相应的UI部件都会更新，以反映这些更改。 应用程序中的视图模型由JavaScript代码表示。

引用应用程序中所有UI元素的视图。 它表示给定UI的结构和外观。 该视图负责显示数据并接受用户输入。 视图由您的应用程序中的HTML / CSS代码表示。

构建淘汰赛时，它们是三个核心概念：

1.声明式绑定：声明式绑定使您能够以简单便捷的方式将UI的各个部分连接到数据模型。 直接使用JavaScript操作DOM时，如果稍后更改DOM层次结构或元素ID，则可能会导致代码损坏。 使用声明性绑定，即使您更改DOM，所有绑定的片段仍保持连接。 您只需将data-bind属性包含到任何DOM元素中，就可以将数据绑定到DOM。

2.依赖关系跟踪：幸运的是，每当您的模型数据已更改时，与之相关联的所有部分都会自动更新，因此绑定和特殊类型的变量称为observables。 无需担心添加事件处理程序和侦听器。 所有这些额外的工作都是由Knockout和Observable在内部执行的，这些通知会在基础值发生更改时通知侦听器。

3.模板化：当您的应用程序变得更复杂并且您需要一种显示丰富的视图模型数据结构的方式时，这很方便，从而使您的代码保持简单。 淘汰赛有一个内置的本地模板引擎，您可以立即使用。 但是，如果您愿意，也可以使用第三方模板引擎，例如jquery.tmpl或Underscore。

不用担心所有这些理论对您来说都是晦涩难懂的。 当我们阅读本教程和代码示例时，所有内容都将变得更加清晰。

入门

在我们深入了解淘汰之前，您需要下载并引用HTML文档中的库。

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

为了使代码与演示文稿分开，最好创建一个JavaScript文件来保存所有应用程序代码。 并且由于在某些情况下我们将使用jQuery，因此您也需要引用它。

<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='knockout-2.0.0.js'></script>
<script type='text/javascript' src='application.js'></script>

这被认为是最佳实践，但是出于培训目的，并且为了使事情变得更容易，您可以通过将JavaScript代码包含在head标签中或将其放置在标记中的方式将JavaScript代码放在同一文档中。

现在，要创建视图模型，只需声明任何JavaScript对象，如下所示：

  function viewModel() {

   // Your code here
  
  };

data-bind属性（稍后说明）不是HTML固有的，浏览器也不知道它的含义。 因此，为了生效，必须通过在脚本末尾插入ko.applyBindings()函数来激活Knockout。 另外，如果您使用外部JavaScript文件，或者您的脚本位于文档的head标签中，则需要将Knockout代码包装在jQuery ready函数中，才能正常工作。 这是开始的基本模板：

$(document).ready(function(){
  
  function viewModel() {

   // Your code here
  
  };

  ko.applyBindings(new viewModel()); 

});

调用ko.applyBindings()方法并传入我们的视图模型会告诉Knockout将指定的模型绑定到我们的UI。 如果您只想将此视图模型绑定到整个UI的一部分，则甚至可以提供DOM元素。 ko.applyBindings()具有两个参数。 第一个参数表示您要与其激活的声明性绑定一起使用的视图模型对象。 第二个参数是可选的，它定义了要搜索数据绑定属性的文档的哪一部分。 例如， ko.applyBindings(viewModel, document.getElementById('container'))会将激活限制为具有ID容器及其后代的元素。 如果要拥有多个视图模型并将每个视图模型与页面的不同区域相关联，这将很有用。

怎么运行的

使用Knockout，可以通过在标记中包含data-bind属性来将数据绑定到DOM元素，该属性指定要执行的数据绑定。 该代码从不对DOM结构进行任何引用，因此您可以自由更改HTML而不会破坏绑定。 在以下示例中，我们将文本数据绑定属性添加到span元素，如下所示：

// syntax: data-bind="bindingName: bindingValue"
<p>The day of the week is <span data-bind="text: dayOfWeek"></span>. It's time for <span data-bind="text: activity"></span></p>

然后，如果要使文本的值动态更新，则必须在视图模型中将其声明为可观察的。

function viewModel() {
  this.dayOfWeek = ko.observable('Sunday');
  this.activity = ko.observable('rest');
};

ko.applyBindings(new viewModel()); 

这将输出“星期几是星期日。该休息了。”

可观察的

淘汰赛通过使用名为ko.observable()的自定义函数包装对象属性来实现可观察的属性。

this.property = ko.observable('value')

观测值被设置为函数。 因此，您可以按以下方式使用它们：

// To read the observable's current value, just call the observable with no parameters.
// The following will return Sunday
this.dayOfWeek()

// To write a new value to the observable, call the observable and pass the new value as a parameter.
// The following will change the day of week to Monday
this.dayOfWeek('Monday')

// To write values to multiple observable properties on a model object, you can use chaining syntax.
this.dayOfWeek('Monday').activity('work')

淘汰赛不需要您使用可观察的属性。 如果您希望DOM元素一次接收值，但是在源对象中的值更改时不更新，则简单对象就足够了。 但是，如果您希望源对象和目标DOM元素保持同步（双向绑定），则需要考虑使用可观察的属性。

在某些情况下，您可能需要将两个或多个可观察值的值合并为一个新值。 这可以通过所谓的可计算观测值来完成。 计算的可观察对象是依赖于一个或多个其他可观察对象的函数，并且只要这些依赖关系中的任何一个发生更改，它们就会自动更新。 计算属性在其评估更改所依赖的任何可观察对象时都会自动更新。 在以下示例中，当day ， month和year一个或多个可观察值发生更改时，每次更新的名为fullDate可观察fullDate将更新。

<p>Day: <input data-bind="value: day" /></p>
<p>Month: <input data-bind="value: month" /></p>
<p>Year: <input data-bind="value: year" /></p>
<p>The current date is <span data-bind="text: fullDate"></span></p>


function viewModel() {
  this.day = ko.observable('24');
  this.month = ko.observable('02');
  this.year = ko.observable('2012');

  this.fullDate = ko.computed(function() {
   return this.day() + "/" + this.month() + "/" + this.year();
  },this);
};

ko.applyBindings(new viewModel()); 

ko.computed()采用第二个参数this 。 如果不传递它，就不可能引用this.day() ， this.month()或this.year() 。 为了简化操作，您可以创建一个变量self ，从而避免添加第二个参数。 从现在开始，我们将在代码示例中使用这种方法。

function viewModel() {
  var self = this;
  self.day = ko.observable('24');
  self.month = ko.observable('02');
  self.year = ko.observable('2012');

  self.fullDate = ko.computed(function() {
   return self.day() + "/" + self.month() + "/" + self.year();
  });
};

ko.applyBindings(new viewModel());

当处理一个对象时，可以通过将其变为可观察对象来轻松跟踪其任何更改。 但是，如果您有多个对象怎么办？ 在这种情况下，淘汰赛具有名为ko.observableArray()的特殊对象，该对象可以检测并响应事物集合的变化。 例如，当您需要UI的重复部分在添加和删除项时出现和消失时，这可以显示和/或编辑多个值。

您应该记住，可观察的数组跟踪的是数组中的对象，而不是那些对象的状态。 简单地将对象放入可观察数组中并不能使该对象的所有属性本身都被观察。 如果愿意，可以使这些属性可观察，但这完全取决于您。 一个可观察的数组仅跟踪其持有的对象，并在添加或删除对象时通知侦听器。

this.property = ko.observableArray();

创建可观察数组时，可以将其保留为空或用一些初始值填充。 在下面的示例中，我们创建一个以星期几填充的可观察数组：

<p>Today is <span data-bind="text: daysOfWeek()[0]"></span></p>

function viewModel() {
  var self = this;
  self.daysOfWeek = ko.observableArray([
  'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
  ]);
  alert("The week has " + self.daysOfWeek().length + " days");
};

ko.applyBindings(new viewModel());

如您所见，要读写Knockout数组，您可以使用任何本机JavaScript函数。 但是Knockout有自己的等效函数，其语法稍微方便一些：

array().push('Some value'); // native JavaScript

array.push('Some value'); // Knockout

有关可用功能的完整列表，请查看文档 。

如果您喜欢阅读这篇文章，您会喜欢Learnable的 ； 向大师学习新鲜技能的地方。 会员可以立即访问所有SitePoint的电子书和交互式在线课程，例如JavaScript JavaScript for the Web 。

From: https://www.sitepoint.com/beginners-guide-to-knockoutjs-part-1/