Knockout.js：简介

Gmail等复杂的Web应用程序的兴起催生了一大堆JavaScript框架。 这些框架使您基本上可以在Web应用程序中创建客户端应用程序。 诸如“ MVC”和其他设计模式之类的术语一旦保存仅用于网络的服务器端，现在仅适用于代码的客户端部分。 这些天最受欢迎的框架是Backbone ， Ember和Knockout 。 本文将以后者为主题。

淘汰赛采用“ 模型-视图-视图-模型（MVVM）”方法来构建应用程序体系结构。 MVVM是一种架构模式，其（某些）起源于Microsoft以及他们的Windows Presentation Foundation / Silverlight /尝试使ASP.NET Web Forms可用的失败。 老实说，由于这些原因，我避免了淘汰赛，我想很多开发人员也会这样做。 直到我继承了使用Knockout的应用程序，我才被迫真正了解它。

再一次，令我惊讶的是，得知我毫无根据的开发者偏见是非常错误的。

至少不是MVC

查看Knockout主页 ，其中列出的关键概念是：

• 声明式绑定
• 自动UI刷新
• 依赖追踪
• 模板化

由于您对他们的网站具有相同的访问权限，因此我不会逐一介绍这些内容。 简而言之，我会说什么。 如我所见，Knockout的优势在于它是数据绑定的。 如果您从未使用过将UI绑定到模型的框架（在这种情况下为视图模型），则核心概念是对该模型的任何更改都将立即反映在视图/ UI中。 我认为Adobe Flex是最著名的数据绑定框架。 数据绑定非常强大，尤其是当您的模型中散布着UI的时候。 在一个位置更新一个值并更改10个UI元素将给任何trollface带来微笑。

数据绑定是Knockout提供的最甜蜜的调味料，但不仅如此。 模板功能非常强大，您可以使用任何喜欢的JavaScript模板库（jQuery模板， 髭等）。 Knockout也是可扩展的，它提供了一个插件框架，我们将在演示应用程序中利用该框架来展示Knockout的实际效果。

舔它，舔它好

该演示应用程序是一个简单但令人讨厌的应用程序，名为LinkLicker。 想法是提交链接，然后单击您喜欢的链接。 是的，我今年4岁。

该应用程序的服务器端既是Rails应用程序，也不相关。 您的服务器端应用程序只需要吐回JSON，因此它可以是Sinatra或Rails或Cuba等等。 我希望向您介绍Web应用程序的详细信息，但是如果您只是必须知道的话 ，它们位于github存储库中 。

该应用程序显示一个允许提交链接的表单，一个提交的链接列表以及一个被当前用户舔过的链接列表。 链接被点击后，它的图标就会改变。 我敢肯定，这是下一个FacebookTwitter。

设定

您需要在Web应用程序中提供Knockout代码才能完成此工作。 我已经将我的软件以及最常用的Knockout插件放入了供应商目录。 这个插件是Knockout Mapping插件 ，它消除了将JSON从服务器映射到客户端上的JavaScript对象的所有繁琐工作。 注意：我不会在本文中真正介绍Mapping插件，但是重要的一点是，当它映射对象时，它会从我们所有的JSON属性中创建可观察对象。 您很快就会看到可观察的东西。

从结构上讲，我喜欢将每个“模型”类放在自己的客户端文件中。 LinkLicker实际上只有一种模型：链接。 我还喜欢有一个全局类，该类代表我称为应用程序的应用程序，这毫不奇怪。 JavaScript的最终目录结构如下所示：

用户界面

LinkLicker的UI受我希望尽可能少做而同时仍能理解Knockout概念的强烈推动。 正如我上面提到的，有一个表单以及三个链接列表。 这三个列表是“所有链接”，“新建”（意思是未选中）和“已选中”链接。 您可能已经猜到了，链接在任何给定时间都可以位于多个列表中。 用户界面的屏幕截图如下：

引导程序

引导LickLinker包括绑定到表单并创建我们的三个列表。 我们将在我们的应用程序中创建所有这些属性。 简单的东西。

var App = function() {
  this.newLink = ko.observable(new Link());
  this.mylinks = ko.observableArray();
  this.lickedLinks = ko.observableArray();
  this.allLinks = ko.observableArray();
};

您可能想知道所有这些可观察到的疯狂是什么。 当您将某个属性设为可观察时，它将成为该属性更改的超级强大通知者。 淘汰赛将跟踪（尽其所能，而且非常擅长）对您的房地产感兴趣的事物，并在其发生变化时通知您。 Knockout网站上的Observables文档很棒，并且还提供交互式教程。

简而言之，如果您可以提前考虑的话，当我们将UI（窗体）绑定到newLink时，它将通知我们的窗体更改，反之亦然。

其他三个属性是observableArrays 。 从概念上讲，它们与可观察对象完全相同，只是它们在集合上起作用。 一个observableArray将跟踪数组中有哪些对象，并且它具有许多辅助方法来添加和删除这些对象。 您可以轻松地将项目弹出或推送到observableArray上，对其进行切片，获取其长度，反转它以及其他许多期望的方法。

同样，由于observables和observableArrays是更改的通知者，因此当我们将UI中的列表绑定到这些链接列表时，所有内容都会更新以反映最新状态。 希望这个概念正在深入。

该模型

LinkLicker的模型只是一个链接，它具有3个属性：url，description和lickedByCurrentUser。

表格

淘汰赛全是关于数据绑定的，还记得吗？ 这样，我们可以将新的Link绑定到表单，然后，当用户输入数据时，它将填充此新绑定的Link。 在上面的代码片段中，我们将newLink属性创建为可观察的。 现在，将其绑定到表单：

<form id="create_form" class="one-third column alpha" data-bind="submit: createNewLink">
<!-- ko with: newLink -->

 <label for="link_url">Link:</label>
 <input id="link_url" type="text" name="linkhttps%3A%2F%2Feditor.sitepoint.com" data-bind="value: url" />

 <label for="description">Description:</label>
 <input id="link_description" type="text" name="link[description]" data-bind="value: description" />

 <!-- /ko -->
 <input type="submit" value="Add" /></form>

在以上代码段中，将焦点放在<!-- ko with: newLink -->行。 淘汰赛提供了两种不同的方式来将DOM的一部分绑定到视图模型。 本示例使用“无容器绑定”，这意味着，它不会为该声明创建DOM元素。

另一种方法是创建一个DOM元素（例如div ）并添加一个指定模板的data-bind属性。 如果您感到困惑，可以在后者的Knockout网站上找到大量示例。

ko with: newLink告诉Knockout查找此视图所绑定的内容的newLink属性，并将范围限制在该视图中。 如果您查看input标签，这应该会更清楚一些。 每个输入标签都有一个data-bind属性，该属性将该输入的值绑定到newLink上的一个属性。

束缚的纽带

在我们的UI就绪后，我们需要某种机制将其绑定到我们的视图模型。 在此应用程序中，视图模型是客户端上的全局App类。 加载页面时，App绑定到视图，如下所示：

$(function(){
  App.globalApp = new App();
  ko.applyBindings(App.globalApp);

  App.globalApp.loadLinks();
});

十分简单。

可以通过创建两个“计算对象”（以前是dependentObservables）来过滤列表。 在这里，让我告诉你：

this.allLinks = ko.observableArray();

this.lickedLinks = ko.computed(function() {
  return this.allLinks().filter(function(link) {
    return link.isLicked();
  });
}, this);

this.newLinks = ko.computed(function() {
  return this.allLinks().filter(function(link) {
    return !link.isLicked();
  });
}, this);

computed值是可观察值，它取决于其他可观察值的值。 您可以看到我们基于每个链接的isLicked（）值过滤allLinks observableArray。 计算（ this ）的第二个参数是绑定函数的上下文。

计算是非常有用的，您会发现自己到处都在使用它们。

扩展KnockoutJS

尽管淘汰赛有很多可用的绑定，例如文本，html，css，可见，但您会发现需要重新绑定的场合。 编写自定义绑定非常简单。 例如，我要编写一个hidden绑定，它与visible绑定相反。 在下面：

ko.bindingHandlers.hidden = {
  update: function(element, valueAccessor){
    var value = ko.utils.unwrapObservable(valueAccessor());

    ko.bindingHandlers.visible.update(element, function() {
      return !value;
    });

  }
};

在绑定中，我获取要绑定的元素的值，然后将其传递给现有的visible绑定。 结果取反并返回。

显然，这是一个琐碎的绑定，但是如果需要，您会变得非常复杂。 Google会向您显示jQuery UI元素的绑定，以及社区创建的数千个其他自定义绑定。

妈妈说，包起来！

我想介绍Knockout的许多其他方面，但是我认为我们对其中的许多功能都做了很好的了解。 希望在评估JavaScript框架时，本文将帮助您做出决定。

记住，LinkLicker源代码的全部内容都是您自己在github上浏览，使用，模拟的。

如果您对LinkLicker或淘汰赛有疑问，请在评论中打我。 谢谢阅读！

From: https://www.sitepoint.com/knockout-js-an-introduction/