knockoutjs_KnockoutJS入门指南：第2部分

最新推荐文章于 2021-08-04 00:01:18 发布

dingshi7798

最新推荐文章于 2021-08-04 00:01:18 发布

阅读量138

点赞数

文章标签： java javascript js python css ViewUI

原文链接：https://www.sitepoint.com/beginners-guide-to-knockoutjs-part-2/

版权

knockoutjs

KnockoutJS入门指南：绑定

Knockout为最常见的任务和方案提供了一整套有用的内置绑定。这些绑定中的每一个都允许您绑定简单数据值或使用JavaScript表达式来计算适当的值。这提供了很大的灵活性，并且可以轻松地创建非常动态的UI。

使用内置绑定的语法是在HTML元素的data-bind属性内包括Knockout绑定名称和视图模型属性对。

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

如果要数据绑定到HTML元素中的多个属性，只需使用以下语法用逗号分隔绑定即可：

<span data-bind="text: msg, visible: toggle"></span>

您应该记住，大多数绑定尝试将任何参数转换为布尔值。如果您提供的值实际上不是布尔值，它将被松散地解释。这意味着非零数字，非空对象和非空字符串都将被解释为true，而零，空，未定义和空字符串将被解释为false。

如果您了解如何使用一种类型的数据绑定，那么其他类型应该很容易学习。现在，我们将通过提供描述和简短示例来解释其中的每一个。

简单绑定

在上一教程中，我们在处理可观察对象时已经看到了text绑定。它将关联元素的文本设置为参数的值。这等效于设置DOM元素的innerText （对于IE）或textContent （对于其他浏览器）属性。如果您的参数不是数字或字符串，则绑定会将toString()的结果分配给元素。

如果此参数是一个可观察的值，则每当值更改时，绑定将更新元素的文本。如果该参数不可观察，则只会设置一次元素的文本，以后不会再次更新。这对所有绑定均有效。

text绑定通常用于显示span或div元素中的值。使用它时，以前的任何文本都将被覆盖。

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

value绑定将关联元素的值设置为参数的值。这通常用于表单元素，例如input ， select和textarea 。用户在关联的表单控件中编辑值时，它将更新视图模型上的值。同样，当您更新视图模型中的值时，这将更新屏幕上窗体控件的值。这称为双向绑定。如果您的参数不是数字或字符串，则绑定会将toString()的结果分配给元素。

默认情况下，当用户将change事件转移到另一个DOM节点上时，Knockout会更新您的视图模型，但是您可以使用下面描述的valueUpdate参数来控制何时更新值。如果绑定还包含一个名为valueUpdate的参数，则此参数定义Knockout应该使用哪个浏览器事件来检测更改。

"change"是默认事件，当用户将焦点移到其他控件时，或者在更改后立即使用<select>元素，它会更新视图模型。

"afterkeydown" –用户开始输入字符后立即更新您的视图模型。通过捕获浏览器的keydown事件并异步处理该事件来工作。如果要使用"afterkeydown"实时更新视图模型，将是最佳选择。

"keyup" –用户释放键时更新您的视图模型

"keypress" –用户键入键后，更新您的视图模型。如果用户按住某个键，此操作将重复更新

<input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
<p data-bind="text: name"></p>

function viewModel() {
 var self = this;
 self.name = ko.observable()
};
ko.applyBindings(new viewModel());

控制标记

html绑定不经常使用，但是在视图模型中呈现HTML内容非常方便。此绑定将关联元素HTML设置为参数的值，并且等效于在DOM元素上设置innerHTML属性。如果您的参数不是数字或字符串，则绑定会将toString()的结果分配给元素。

由于此绑定使用innerHTML设置元素的内容，因此应注意不要将其与不受信任的模型值一起使用，因为这可能会引发脚本注入攻击。如果不能保证内容可以安全显示，则可以使用text绑定。

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

function viewModel() {
 var self = this;
 self.markup = ko.observable('<p><strong>Knockout</strong> is so <em>cool</em>!</p>')
};
ko.applyBindings(new viewModel());

尽管Knockout具有许多内置绑定，但是您肯定会遇到某些不存在的情况。对于这些，Knockout提供了attr绑定，该绑定允许您将任何属性数据绑定到视图模型属性。该参数应该是一个JavaScript对象，其中属性名称是属性，属性值是将绑定到该属性的值。这在许多常见情况下非常有用，例如绑定a元素的href和title或img元素的src和alt 。

<img data-bind="attr: {src: url, alt: details}" />

function viewModel() {
 var self = this;
 self.url = ko.observable(images/logo.png)
 self.details = ko.observable('This is logo')
};
ko.applyBindings(new viewModel());

添加样式

您可以使用css和style内置绑定将样式与Knockout绑定。

css绑定为关联元素设置一个或多个CSS类。该参数应该是一个JavaScript对象，其属性名称对应于所需CSS类，并且属性值评估为true或false，指示是否应应用该类。您可以一次设置多个CSS类。

<style>
.colorize {color: red}
</style>

<p data-bind="css: { colorize: on }">Text</p>

function viewModel() {
 var self = this;
 self.on = ko.observable(true)
};
ko.applyBindings(new viewModel());

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

您可以使用表达式来确定何时应用该类。

<p data-bind="css: { colorize: on() > 3 }">Text</p>

尽管最好尽可能使用css类，但有时您可能还需要设置特定的样式。 Knockout通过其style内置绑定支持此功能，该绑定为关联元素设置一个或多个样式值。参数应该是一个对象，其属性对应于CSS样式名称，并且值对应于您希望应用的样式值。通常，此参数值是使用JSON声明的。

<p data-bind="style: {color: on() > 3 ? 'red' : 'black'}">Text</p>
function viewModel() {
 var self = this;
 self.on = ko.observable(5)
};
ko.applyBindings(new viewModel());

注意：如果属性或CSS类的名称不是合法JavaScript变量名称，则应将标识符名称括在引号中，以使其成为字符串文字。而且，如果要应用名称不是合法JavaScript标识符的样式，则必须使用该样式JavaScript名称。

//incorrect:
<div data-bind="attr: { data-something: someValue }">...</div>
<div data-bind="css: { my-class: someValue }">...</div>
<div data-bind="style: { font-weight: someValue }">...</div>

//correct:
<div data-bind="attr: { 'data-something': someValue }">...</div>
<div data-bind="css: { 'my-class': someValue }">...</div>
<div data-bind="style: { fontWeight: someValue }">...</div>

处理事件

淘汰赛通过event内置绑定支持绑定到任何事件。它将指定事件的事件处理程序添加到关联的DOM元素。您可以使用它绑定到任何定义HTML事件。在事件处理程序中，您可以访问当前视图模型数据项，事件对象，甚至访问作为事件绑定的一部分传递的自定义参数。要使用event绑定，您传递一个对象文字，其中包含事件名称和视图模型方法的名称值对，并用逗号分隔。

<p data-bind="event: { mouseover: hello, mouseout: goodbye }"> Mouse over me! </p>
<p data-bind="text: helloEnabled"></p>
<p data-bind="text: goodbyeEnabled"></p>

function viewModel() {
var self = this;
self.helloEnabled = ko.observable()
self.goodbyeEnabled = ko.observable()
 self.hello = function() {
 self.helloEnabled('Hello!');
 self.goodbyeEnabled('');
 }
 self.goodbye = function() {
 self.goodbyeEnabled('Goodbye!');
 self.helloEnabled('');
 }
};
ko.applyBindings(new viewModel());

您可能已经猜到， click绑定正在处理click事件。因为它是事件绑定的最常用绑定，所以它只是event绑定的快捷方式。

<button data-bind="click: writeMSG">Show</button>
<p data-bind="text: msg"></p>

function viewModel() {
 var self = this;
 self.msg = ko.observable()
 self.writeMSG = function() {
 self.msg('Hello!')
 }
};
ko.applyBindings(new viewModel());

submit绑定是处理表单元素的提交事件的快捷方式。当您在表单上使用submit绑定时，Knockout将阻止浏览器对该表单进行默认的提交操作。换句话说，浏览器将调用您的处理程序函数，但不会将表单提交给服务器。这是一个有用的默认值，因为使用submit绑定时，通常是因为您使用表单作为视图模型的接口，而不是常规HTML表单。如果您确实希望让表单像普通HTML表单一样提交，则只需从您的提交处理程序中返回true即可。

您可以使用单击提交按钮来代替在表单上使用提交。但是，使用提交绑定给您带来了使用其他方式提交表单的好处，例如在文本框中键入内容时按Enter键。

控制UI

visible绑定根据绑定参数值设置关联元素的可见性。绑定尝试将任何参数转换为布尔值。敲除的visible绑定应该绑定到评估为true或false的属性。这优先于您使用CSS定义的任何显示样式。

<button data-bind="click: show">Show Message</button>
<button data-bind="click: hide">Hide Message</button>
<p data-bind="visible: msg">Hello, Knockout!</p>

function viewModel() {
 var self = this;
 self.msg = ko.observable()
 self.show = function() {
 self.msg(true)
 }
 self.hide = function() {
 self.msg(false)
 }
};
ko.applyBindings(new viewModel());

enable/disable绑定根据提供的值在关联的元素上设置Disabled属性。这通常用于表单元素，例如input ， select和textarea 。 Knockout提供内置绑定以启用和禁用输入元素。如果绑定到该输入属性的属性评估为true，则enable绑定将启用该输入元素；如果评估为false，则禁用该输入元素。 disable绑定的功能完全相反

<input data-bind="value: val, valueUpdate: 'afterkeydown'">
<button data-bind="enable: val">Send</button>

function viewModel() {
 var self = this;
 self.val = ko.observable()
};
ko.applyBindings(new viewModel());

淘汰赛具有名为hasfocus的内置绑定，该绑定确定并设置哪个元素具有焦点。当您希望在访问者打开页面时将焦点设置为表单上的特定元素（例如搜索表单）时， hasfocus绑定非常方便

<input data-bind="value: val, hasfocus: on"> 
<button data-bind="enable: on">Send</button>
function viewModel() {
 var self = this;
 self.val = ko.observable()
 self.on = ko.observable(false)
};
ko.applyBindings(new viewModel());

处理复选框和单选按钮

复选框可以是绑定到Knockout的checked绑定的数据。 checked绑定应绑定到评估为true或false的属性或表达式。因为视图模型属性被定义为可观察对象，所以当源属性更改时，复选框也会更新。同样，当用户选中或取消选中复选框时，该值将在视图模型属性中更新。此绑定设置单选按钮和复选框的选中状态。对于复选框，绑定尝试将任何参数转换为布尔值。对于单选按钮，绑定会将button的value属性与绑定参数进行比较。

<p>Let me choose my favorite car: <input type="checkbox" data-bind="checked: car" /></p>
<div data-bind="visible: car">
 Preferred model:
 <div><input type="radio" name="modelsGroup" value="ferrari" data-bind="checked: model" /> Ferrari</div>
 <div><input type="radio" name="modelsGroup" value="lamborghini" data-bind="checked: model" /> Lamborghini</div>
 <div><input type="radio" name="modelsGroup" value="bugatti" data-bind="checked: model" /> Bugatti</div>
</div>

function viewModel() {
 var self = this;
 self.car = ko.observable(),
 self.model = ko.observable("lamborghini") // Initially selects Lamborghini
};
ko.applyBindings(new viewModel());

创建下拉列表

下拉列表具有几个重要属性，可用于加载项目列表，显示值，使用其他键值以及存储用户的选择。敲除为每个提供了内置绑定。 options绑定设置将出现在下拉列表元素中的选项。该值应该是一个数组。此绑定不能与<select>元素一起使用。对于多选列表，要设置选择了哪些选项，或者要读取选择了哪些选项，请使用selectedOptions绑定。对于单选列表，您还可以使用value绑定读取和写入所选选项。

options绑定通常通过视图模型上的数组属性来标识要显示的值的列表。

<p>Choose your destiny: <select data-bind="options: availableRoles"></select></p>

function viewModel() {
 var self = this;
 self.availableRoles = ko.observableArray(['an artist', 'an actor', 'an author'])
};
ko.applyBindings(new viewModel());

selectedOptions绑定控制当前在多选列表中选择了哪些元素。当用户选择或取消选择多选列表中的项目时，这会将相应的值添加或删除到视图模型上的数组。

<p>Choose your destiny: <select data-bind="options: availableRoles, selectedOptions: selected" multiple="true"></select></p>

function viewModel() {
 var self = this;
 self.availableRoles = ko.observableArray(['an artist', 'an actor', 'an author'])
 self.selected = ko.observableArray(['an author'])
};
ko.applyBindings(new viewModel());

有时您想在下拉列表中显示一个值，但是当用户从列表中选择一个项目时使用另一个值。淘汰赛的内置optionsText和optionsValue绑定帮助。 optionsText绑定设置为属性的字符串名称，该属性的字符串名称通过options绑定显示在下拉列表中。 optionsValue绑定设置为属性的字符串名称，该属性将绑定到下拉列表中项目的选定值。当您不想默认选择任何特殊选项时， optionsCaption很有用。此参数在选项列表顶部设置诸如“选择项目…”之类的文本，并在未选择任何特定项目时显示。

<p>Locales: <select data-bind="options: locales, selectedOptions: selected, optionsCaption: 'Select your locale...', optionsText: 'country', optionsValue: 'code'"></select></p>
<p data-bind="text: selected"></p>

function viewModel() {
  var self = this;
  self.locales = [
   { country: 'USA', code: 'en_US' },
   { country: 'Spain', code: 'es_ES' },
   { country: 'French', code: 'fr_FR' }
  ]
  self.selected = ko.observableArray();
 }
ko.applyBindings(new viewModel());

这就是这部分的全部内容，敬请期待下周同一时间的大结局！

翻译自: https://www.sitepoint.com/beginners-guide-to-knockoutjs-part-2/

knockoutjs

dingshi7798

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
knockoutjs_KnockoutJS入门指南：第2部分

knockoutjs KnockoutJS入门指南：绑定 Knockout为最常见的任务和方案提供了一整套有用的内置绑定。这些绑定中的每一个都允许您绑定简单数据值或使用JavaScript表达式来计算适当的值。这提供了很大的灵活性，并且可以轻松地创建非常动态的UI。使用内置绑定的语法是在HTML元素的data-bind属性内包括Knockout绑定名称和视图模型属性对。 // sy...
复制链接

扫一扫