mvvm框架_引入淘汰赛JavaScript框架（MVVM）

最新推荐文章于 2023-08-01 19:15:40 发布

cunchi8090

最新推荐文章于 2023-08-01 19:15:40 发布

阅读量409

点赞数

文章标签： python java javascript html css ViewUI

原文链接：https://www.experts-exchange.com/articles/18468/Introducing-the-Knockout-JavaScript-Framework-MVVM.html

版权

mvvm框架

介绍 (Introduction)

Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).

Knockoutjs（Knockout）是一个JavaScript框架（模型视图，ViewModel或MVVM框架）。

The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least complicated way as possible.

淘汰赛的主要思想是从JavaScript控制页面的外观，同时以最简单的方式创建引人入胜的用户体验。

There are also other frameworks that essentially do the same thing in their own way. Find what works for you. React is what Facebook is built on and is very popular. AngularJS has also gained a lot of momentum and worth checking out.

还有其他框架本质上以自己的方式执行相同的操作。找到适合您的东西。 React是Facebook的基础并且非常受欢迎。 AngularJS也获得了很多动力，值得一试。

Knockout takes a basic HTML structure and applies logic (written by you) to control the insertion and removal of HTML elements. This keeps the markup simple and straightforward, especially when it comes to repetitive content.

淘汰赛采用基本HTML结构，并应用逻辑（由您编写）来控制HTML元素的插入和删除。这样可以使标记简单明了，尤其是涉及重复性内容时。

It's incredibly easy with Knockout to create dynamic interactive web pages with simplified markup. I've seen markup get out of control when creating content both from the server side (e.g. using PHP) or via the client side (e.g. using jQuery), making it virtually impossible to troubleshoot issues with layout and styling.

使用Knockout创建具有简化标记的动态交互式网页非常容易。从服务器端（例如，使用PHP）或通过客户端（例如，使用jQuery）创建内容时，我已经看到标记失去控制，几乎无法解决布局和样式问题。

I come across many questions in the web dev topic areas that are related to issues with the asker's website. Invariably this starts with them being told to fix their markup and validate it through the The World Wide Web Consortium's (W3C) Validation service. When a site doesn't validate, it is not guaranteed to work on all devices and browsers, let alone with Knockout.

我在网络开发主题领域遇到了许多与问询者网站相关的问题。总是从告诉他们修复标记并通过万维网联合会（W3C）验证服务进行验证开始。如果网站未通过验证，则不能保证它可以在所有设备和浏览器上正常工作，更不用说使用Knockout了。

Knockout allows you to represent your markup as an object structure in JavaScript (called a View-Model) and as that object structure changes, the HTML is updated automatically to reflect those changes.

淘汰赛使您可以将标记表示为JavaScript中的对象结构（称为视图模型），并且随着对象结构的更改，HTML会自动更新以反映这些更改。

As a language, JavaScript is a lot easier to create logic with (given it’s designed for programming), whereas HTML, being a subset of XML is just tags for encapsulating content. There's really no logic or programming to speak of so it makes sense to keep this as simple as you can and leave the hard stuff to JavaScript.

作为一种语言，JavaScript使用它来创建逻辑要容易得多（假定它是为编程而设计的），而HTML作为XML的子集，只是用于封装内容的标签。实际上并没有逻辑或程序可言，因此，使此过程尽可能地简单，并将繁琐的工作留给JavaScript是有意义的。

The expectations with the web are higher than ever. With the emergence of mobile apps that deliver real time interaction, the expectation is that a website should have the same responsiveness. Single page applications deliver a richer user experience, as the interaction is at a speed similar to a native desktop application but through a far more accessible method a web browser.

对网络的期望比以往更高。随着提供实时交互的移动应用程序的出现，人们期望网站应该具有相同的响应能力。单页面应用程序提供了更丰富的用户体验，因为交互的速度类似于本机桌面应用程序，但是通过更易于访问的方法是Web浏览器。

Knockout will only run on the page it's loaded from so the logic is specific to what's happening on that particular page. However, It is possible to pass and store almost any kind of information in the view model when the page loads or at anytime through the life cycle of the page (via Ajax) to implement a required state.

淘汰赛将仅在加载该页面的页面上运行，因此逻辑特定于该特定页面上发生的事情。但是，可以在页面加载时或在页面生命周期中的任何时候（通过Ajax）在视图模型中传递和存储几乎所有类型的信息，以实现所需的状态。

It's important to note that Knockout is self-reliant in that it doesn't require jQuery or any other framework but integrates very nicely with them. I quite often use Knockout with jQuery and Bootstrap as you’ll see later in the example.

需要特别注意的是，Knockout是自力更生的，因为它不需要jQuery或任何其他框架，但可以很好地与它们集成。我经常在jQuery和Bootstrap中使用Knockout，如您将在示例后面看到的那样。

So when to use Knockout? Read on...

那么什么时候使用淘汰赛呢？继续阅读...

"To be or not to be" - When to use Knockout in your app

“成为或不成为”-何时在应用中使用Knockout

A site can become "bloated" very quickly, when including many different frameworks, libraries and styles. Each one will have to be downloaded by the client when they visit your site making the time taken to load your site longer than necessary. Nowadays, the expectation is for information to be presented near instantaneously. If your website is vital to your company's marketing strategy the having a fast snappy site will give you an edge over your competitors. Caching helps to a certain extent but should not be relied on.

当包含许多不同的框架，库和样式时，站点可以很快变得“ blo肿”。客户端访问您的站点时，每个站点都必须由客户端下载，这使得加载您的网站所花费的时间比必要的时间更长。如今，人们期望即时提供信息。如果您的网站对公司的营销策略至关重要，那么拥有一个快速活泼的网站将使您在竞争者中脱颖而出。缓存在一定程度上有所帮助，但不应依赖。

That said, Knockout should only be used when logic needs to be applied to the markup on your page. What kind of logic am I talking about? Knockout has the ability to store information and uses your model to model that information into your webpage. If there's no need to create a state machine (http://en.wikipedia.org/wiki/Finite-state_machine) then you don't need it.

就是说，仅当需要将逻辑应用于页面上的标记时，才应使用Knockout。我在说什么逻辑？淘汰赛可以存储信息，并可以使用您的模型将这些信息建模到您的网页中。如果不需要创建状态机（http://en.wikipedia.org/wiki/Finite-state_machine），则不需要它。

What about jQuery? Yep, jQuery is great for controlling logic of individual elements but it starts to get complex when all those elements are related to each other. What makes Knockout different is observables. Observables are essentially just variables within the view model. When one of these observables changes, Knockout checks the rest of the view model to see if anything is affected and updates the necessary items including the html elements on your page.

jQuery呢？是的，jQuery非常适合控制单个元素的逻辑，但是当所有这些元素相互关联时，它就会变得复杂。可观察的因素使淘汰赛与众不同。可观察的对象本质上只是视图模型中的变量。当这些可观察项之一更改时，Knockout会检查视图模型的其余部分以查看是否有任何影响，并更新必要的项，包括页面上的html元素。

For example, if your users are just filling out a form on a page, where no thought is needed, then there's no reason to use Knockout. If, on the other hand, the form needs to add, remove, show, hide, sort or filter content based on the selections or content entered by the user of your webpage, then Knockout could be for you.

例如，如果您的用户只是在页面上填写表单而无需考虑，则没有理由使用Knockout。另一方面，如果表单需要根据您的网页用户输入的选择内容或内容来添加，删除，显示，隐藏，排序或过滤内容，那么Knockout可能适合您。

Consider flowcharting the actions needed on each page; this will tell you very quickly whether Knockout is needed. If you have a very straight forward flowchart

考虑对每个页面上所需的操作进行流程图处理；这会很快告诉您是否需要淘汰赛。如果您有非常简单的流程图

e.g. [start] => [fill in data] => [submit]

例如[开始] => [填写数据] => [提交]

then there's nowhere Knockout can add value.

那么淘汰赛无处可增值。

It's when questions in your flowchart start cropping up (e.g. is the user already a member?), or when there are multiple paths based on a single action (e.g. choosing a category of product) that the power of Knockout comes into play.

当流程图中的问题开始浮现时（例如，用户已经是成员吗？），或者基于单个操作（例如，选择产品类别）有多个路径时，Knockout的功能就会发挥作用。

淘汰赛如何运作？ (How does Knockout work?)

数据绑定语法 (
data-bind syntax)

Basically, for each element you are going to interact with, the “data-bind” attribute is added.

基本上，对于要与之交互的每个元素，都会添加“数据绑定”属性。

e.g. This will update the contents of the div to have the text “What a very nice day”

例如，这将更新div的内容以显示文本“多么美好的一天”

<div data-bind="text:'What a very nice day'"></div>

This data-bind attribute is a way for your knockout JavaScript to not only know which elements it’s dealing with but also what properties to manipulate. This is the link between the element and the Knockout view model you’re about to create. When you update the view-model object in JavaScript, it will know what elements to check because of the data-bind attribute. If that update has affected any property of an element then the element is updated to reflect the new value.

此数据绑定属性是一种使剔除JavaScript不仅知道它正在处理哪些元素而且还可以操纵哪些属性的方法。这是元素和您将要创建的Knockout视图模型之间的链接。当您使用JavaScript更新视图模型对象时，由于data-bind属性，它会知道要检查哪些元素。如果该更新影响了元素的任何属性，则将更新该元素以反映新值。

Knockout will often manipulate the standard attributes of an element (such as value for an input element) so these are not necessary and will be ignored if they are again linked to in the data-bind attribute.

淘汰赛通常会操纵元素的标准属性（例如输入元素的值），因此这些不是必需的，如果再次将它们链接到data-bind属性中，则将被忽略。

e.g.

例如

<input type="text" name="firstname" value="Robert" data-bind="value: firstname" />

This will not make much sense now but the “value” of the text field will be whatever the latest value for the variable “firstname” is in your view-model. Read on, it’ll make more sense soon.

现在这没有多大意义，但文本字段的“值”将是视图模型中变量“名字”的最新值。继续阅读，很快就会有意义。

()

视图模型 (view-model)

视图模型只是一个JavaScript对象：

var vm = { };

We add properties, variables and functions to this object to give it definition, before handing it over to Knockout to link everything together.

我们将属性，变量和函数添加到此对象以提供定义，然后再将其移交给Knockout以将所有内容链接在一起。

To make it so that Knockout can understand what we’re doing, we create our variables using the observable functions from Knockout. We’re essentially telling Knockout that these values are going to change so keep an eye out for them and update everyone as required.

为了使Knockout能够了解我们在做什么，我们使用Knockout的可观察函数创建变量。我们实际上是在告诉淘汰赛，这些值将改变，因此请密切注意它们并根据需要更新每个人。

So later, we’ll build a form that captures the name and gender of the user and shows different options based on the gender selected. These values are recorded in your view-model and used as required.

因此，稍后，我们将构建一个表单，以捕获用户的姓名和性别，并根据所选性别显示不同的选项。这些值记录在您的视图模型中，并根据需要使用。

var vm = {
    firstname: ko.observable(),
    lastname: ko.observable(),
    gender: ko.observable(),
};

If we were to pass a value to the observable() function, that would be the initial value for that variable, which would update the linked element in your HTML.

如果我们要将值传递给observable（）函数，则它将是该变量的初始值，这将更新HTML中的链接元素。

On our form, we’re going to have a simple dropdown list for selecting the gender. I realise this could also be a group of two radio buttons but for this example, I’m showing you how easy it is to create a dropdown and use it’s value in real time. This especially becomes more prevalent with large data sets or getting data using AJAX (think country names for instance and creating a select box for that).

在我们的表单上，我们将有一个简单的下拉列表，用于选择性别。我意识到这也可能是由两个单选按钮组成的组，但是在此示例中，我向您展示了创建下拉菜单并实时使用其值是多么容易。对于大型数据集或使用AJAX获取数据尤其如此（例如，考虑国家名称并为此创建一个选择框）。

So we add our available options to our view-model as an array using the observableArray() function.

因此，我们使用observableArray（）函数将可用选项作为数组添加到视图模型中。

vm.genders = ko.observableArray([“male”,”female”]);

<select class="form-control" name="gender" id="" data-bind="options: genders, optionsCaption: '-select-', value: gender">

The syntax of the data-bind in the select element is described as:

select元素中数据绑定的语法描述为：

options: this is the variable from the view-model that has the options to display in the dropdown

选项：这是视图模型中的变量，具有在下拉列表中显示的选项

optionsCaptions: this is just what to show when there hasn’t been a selection yet. This is also shown when the gender observable is set to null or “”

optionsCaptions：这只是在没有选择时显示的内容。当“可观察的性别”设置为null或“”时，也会显示

value: this is the view-model variable that holds whatever has been selected.

值：这是一个视图模型变量，用于保存已选择的内容。

Note that there are no option elements for the select element. They are created automatically by Knockout. With larger dropdowns with more options, this can make your HTML easier to read.

注意，select元素没有选项元素。它们是由淘汰赛自动创建的。带有更大的下拉菜单和更多选项，可以使HTML易于阅读。

To capture the name, we add the first name and last name variables to the data-bind attribute of each

为了捕获名称，我们将名字和姓氏变量添加到每个变量的数据绑定属性中

<input class="form-control" type="text" data-bind="value: firstname"/>
<input class="form-control" type="text" data-bind="value: lastname"/>

Now it gets interesting.

现在变得有趣了。

This form is about capturing what printed magazines you may like depending on your gender. To do that, we detect when the gender is changed we display only the relevant magazine names.

该表格是关于根据性别捕获您可能喜欢的印刷杂志的信息。为此，我们检测到性别发生变化时，我们仅显示相关的杂志名称。

The magazines are stored in the view-model like so:

杂志以如下方式存储在视图模型中：

    vm.magazines: ko.observable({
      "m": ["Zoo","Men\'s Health","Golf Digest","Inside sport"],
      "f": ["Cleo","Dolly","Womens Weekly"]
    }),

The magazines observable contains an object with a “m” and a “f” property that each contain an array of magazine names.

可观察的杂志包含一个具有“ m”和“ f”属性的对象，每个对象都包含一个杂志名称数组。

Here is the male section:

这是男性部分：

<div data-bind="visible: gender()=='male'">
              <fieldset>
                <legend>Magazines for Men</legend>
                <div data-bind="foreach: magazines().m">
                  <input type="checkbox" name="mags[m]" data-bind="value: $data, checked: $parent.selectedMags, attr: {id: 'm'+$index()}"/>
                  <label data-bind="attr: {for: 'm'+$index()}, text: $data"></label>
                </div>
              </fieldset>
 </div>

The whole section uses a visible property, internal to Knockout that allows to showing or hiding elements based on any logic the view-model has access to. In this case, this section is only visible when the gender observable is “male”.

整个部分使用Knockout内部的visible属性，该属性允许根据视图模型可访问的任何逻辑来显示或隐藏元素。在这种情况下，仅当可观察到的性别为“男性”时，此部分才可见。

The next part dynamically creates the magazine names with a corresponding checkbox for the user to select. It does this via the foreach binding such that any child element of where this is applied is duplicate for each element in the array. As you can see from the example, a new input element will be created for every magazine.

下一部分将动态创建杂志名称，并带有相应的复选框供用户选择。它通过foreach绑定来执行此操作，以便对该数组中的每个元素重复应用该元素的任何子元素。从示例中可以看到，将为每个杂志创建一个新的输入元素。

foreach: magazines().m

foreach：magazines（）。m

magazines() returns an object with m and f properties, each containing an array so magazines().m returns the male magazines array.

magazines（）返回一个具有m和f属性的对象，每个对象都包含一个数组，因此Magazines（）。m返回male杂志数组。

These elements are within the loop and need slightly different syntax, where scope has to be taken into account.

这些元素在循环内，并且需要略微不同的语法，因此必须考虑范围。

$data, $parent, $index are special Knockout observables that represent data specific to the loop.

$ data，$ parent，$ index是特殊的Knockout观察值，表示特定于循环的数据。

$data is the current value of the array

$ data是数组的当前值

$index is the corresponding index that we’re up to looping through the array

$ index是我们要遍历数组的相应索引

$parent is making sure that we are accessing the right variable, in case the array we’re iterating over has an element with the same property name.

$ parent可以确保我们正在访问正确的变量，以防我们要遍历的数组具有具有相同属性名称的元素。

<input type="checkbox" name="mags[m]" data-bind="value: $data, checked: $parent.selectedMags, attr: {id: 'm'+$index()}"/>
<label data-bind="attr: {for: 'm'+$index()}, text: $data"></label>

This whole section is repeated for female.

对于女性，重复整个部分。

I’ve also added a section to dynamically show what you’ve selected. For this, we’ll use a computed observable. Fancy name for something that just combines other observables into a more readable format:

我还添加了一个部分来动态显示您选择的内容。为此，我们将使用计算的可观察值。花哨的名称，它只是将其他可观察值组合成更易读的格式：

<div data-bind="html: myDetails"></div>

In the view-model, myDetails is created like this and just joins all the values together in a readable format:

在视图模型中，myDetails的创建方式如下，并以可读格式将所有值连接在一起：

  vm.myDetails = ko.pureComputed(function() {
    // concatenate the first and last names
    var name = vm.firstname() + " " + vm.lastname();
    // put brackets around the gender for displaying
    var gender = (vm.gender()) ? "(" + vm.gender() + ")" : "";
    // return the name and gender together as one string
    return name+" "+gender+" "+vm.selectedMags().join();
  });

A finishing touch is to make sure we reset the magazine selections if the gender is changed. To do that we capture when the gender is changed (via a subscribe event) by the user and we remove all the elements from the selectedMags array:

最后要确定的是，如果更改了性别，我们将重置杂志的选择。为此，我们捕获用户更改性别（通过订阅事件）并从selectedMags数组中删除所有元素的情况：

vm.gender.subscribe(function() {
    vm.selectedMags([]);
  });

示例-选择您喜欢的杂志 (Example - Choose your favourite magazines)

In this example I’m going to show you how to create a dynamic form that changes as you enter data. We’ll be using jQuery to simplify our JavaScript coding along with Bootstrap to lay out the form nicely.

在此示例中，我将向您展示如何创建随输入数据而变化的动态表单。我们将使用jQuery来简化JavaScript编码，并使用Bootstrap很好地布局表格。

For those that want to see how it works, skip to the jsbin demo: http://jsbin.com/waguli/1/edit?html,js,output

对于那些想了解它如何工作的人，请跳到jsbin演示：http://jsbin.com/waguli/1/edit?html,js,output

Include Knockout in the header of your page (after jQuery and Bootstrap) by either downloading it or getting it from a CDN (both ways are described here)

通过下载或从CDN获取Knockout的方式添加到页面标题中（在jQuery和Bootstrap之后）（在此介绍两种方式）

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>

快速步骤-Bootstrap简介 (
Quick Side Step - Bootstrap Intro)

对于那些不了解Bootstrap的人，我建议在任何可能的地方使用它，以使布局尽可能容易。

As a quick intro, everything in Bootstrap is laid out in a grid of 12 columns. To make it work you start with a “container”, that contains a number of “row” elements. Within each row you set up the number of columns you want. Visualize your page and divide it into a layout that is made up of rows and columns.

作为快速入门，Bootstrap中的所有内容都以12列的网格布局。为了使它起作用，您首先要包含一个“容器”，其中包含许多“行”元素。在每一行中，设置所需的列数。可视化页面并将其划分为由行和列组成的布局。

Every column class starts with “col-” followed by “xs-”,”sm-”,”md-” or ”lg-”, followed by the number of columns (out of 12) that you want your column to take up. The “xs-”,”sm-”,”md-” or ”lg-” just signifies how many columns you want that element to take up at different screen widths. Bootstrap is smart enough to work out how big the visible space is on the screen and will act accordingly. e.g. col-xs-6 means you want to take up 6 columns when the screen size is below 768px. See Bootstrap for more info: http://getbootstrap.com/css/#grid-options.

每个列类均以“ col-”开头，后跟“ xs-”，“ sm-”，“ md-”或“ lg-”，然后是您要占用该列的列数（共12列）。 “ xs-”，“ sm-”，“ md-”或“ lg-”仅表示您希望该元素在不同屏幕宽度下占据多少列。 Bootstrap足够聪明，可以计算出屏幕上的可见空间有多大，并将采取相应的行动。例如col-xs-6表示当屏幕尺寸小于768px时，您希望占用6列。有关更多信息，请参见Bootstrap：http://getbootstrap.com/css/#grid-options。

返回代码... (
Back to the code...)

我使用了fieldset和Legend标签来给页面带来更好的感觉

<body>
    <div class="container">
      <div class="row">
        <div class="col-xs-6">
          <fieldset>
            <legend>Your Details:</legend>
            <div data-bind="html: myDetails"></div>
          </fieldset>
        </div>
        <div class="col-xs-6">
          <form action="">
            <fieldset>
              <legend>Enter your details:</legend>
              <div class="row">
                <div class="col-xs-3"><label>First Name</label></div>
                <div class="col-xs-7">
<input class="form-control" type="text" data-bind="value: firstname"/>
    </div>
                <div class="col-xs-12">&nbsp;</div>
                <div class="col-xs-3"><label>Last Name</label></div>
                <div class="col-xs-7">
                     <input class="form-control" type="text" data-bind="value: lastname" />
    </div>
                <div class="col-xs-12">&nbsp;</div>
                <div class="col-xs-3">
                  <label>Gender</label>
                </div>
                <div class="col-xs-7">
                  <select class="form-control" name="gender" id="" data-bind="options: genders, optionsCaption: '-select-', value: gender">
                  </select>
                </div>
              </div>
            </fieldset>
            <br/>
            <div data-bind="visible: gender()=='male'">
              <fieldset>
                <legend>Magazines for Men</legend>
                <div data-bind="foreach: magazines().m">
                  <input type="checkbox" name="mags[m]" data-bind="value: $data, checked: $parent.selectedMags, attr: {id: 'm'+$index()}"/>
                  <label data-bind="attr: {for: 'm'+$index()}, text: $data"></label>
                </div>
              </fieldset>
            </div>
            <div data-bind="visible: gender()=='female'">
              <fieldset>
                <legend>Magazines for Women</legend>
                <div data-bind="foreach: magazines().f">
                  <input type="checkbox" name="mags[f]" data-bind="value: $data, checked: $parent.selectedMags, attr: {id: 'f'+$index()}"/>
                  <label data-bind="attr: {for: 'f'+$index()},text: $data"></label>
                </div>
              </fieldset>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>

剔除视图模型 (Knockout view-model)

为了确保所有元素都已正确加载并且DOM已经准备就绪，我们将代码包装在jQuery的初始化函数中。

The view model is just a JavaScript object. You can add all your properties when you create the object, or you can add them after (as shown below)

视图模型只是一个JavaScript对象。您可以在创建对象时添加所有属性，也可以在之后添加它们（如下所示）

$(function() {
  // create the basic view model object with the required variables (observables)
  var vm = {
    firstname: ko.observable(""),
    lastname: ko.observable(""),
    gender: ko.observable(""),
    genders: ko.observableArray(["male","female"]),
    magazines: ko.observable({
      "m": ["Zoo","Men\'s Health","Golf Digest","Inside sport"],
      "f": ["Cleo","Dolly","Womens Weekly"]
    }),
    selectedMags: ko.observableArray([])
  };

  // create a computed observable that returns the data nice and pretty (added after the initial object was created)
  vm.myDetails = ko.pureComputed(function() {
    var name = vm.firstname() + " " + vm.lastname();
    var gender = (vm.gender()) ? "(" + vm.gender() + ")" : "";
    return name+" "+gender+" "+vm.selectedMags().join();
  });
  
  // A subscribe function is called when the value for an observable changes
clear any selected mags if we change gender
  vm.gender.subscribe(function() {
    vm.selectedMags([]);
  });

  // bind the model to the view
  ko.applyBindings(vm);
});

Running your example, you’ll see the names you enter automatically appear in the “Your Details” section. Changing gender will show you different options, which will also appear under “Your Details” as the selections are made.

运行示例，您将看到输入的名称自动出现在“您的详细信息”部分。更改性别将为您显示不同的选项，所做的选择也会显示在“您的详细信息”下。

最后一点：搜索引擎优化（SEO） (
A Last Point: Search Engine Optimization (SEO))

还应指出，您的搜索引擎优化（SEO）策略应与淘汰赛并驾齐驱。重要的是，您的网站不要依赖Knockout在页面上创建所有内容。那里仍然需要有基本的标记，以确保没有它也可以呈现您的页面，并且不会影响SEO或SERP。

摘要 (
Summary)

正确应用剔除功能非常强大且有用。它为您提供了一个在网页周围构建健壮模型的框架，但我只主张在应用程序需要时使用它。

It certainly has a lot of possibilities:

当然有很多可能性：

- Filter and sort content on the page based on any kind of attribute such as category or price.

-根据任何种类的属性（例如类别或价格）对页面上的内容进行过滤和排序。

- First step validation of any data a user has entered into a form.

-第一步验证用户输入到表单中的任何数据。

- Create large dropdown lists with minimal HTML in your page

-在页面中使用最少HTML创建大型下拉列表

- Makes it easy to show your data via computed observables

-通过计算的观测值轻松显示数据

and so on... 等等...

Careful consideration should be made to each and every additional plugin, framework and style to be included in your site. By no means is this article advocating to use a MVVM framework on all or any of your pages, I'm giving you the information on when to use a MVVM framework and when you could be unnecessarily bloating and slowing down your site.

应该仔细考虑要包含在您的站点中的每个其他插件，框架和样式。本文决不主张在您的所有或任何页面上使用MVVM框架，我是在向您提供有关何时使用MVVM框架以及何时可能不必要地使您的网站膨胀和减慢速度的信息。