敲除具有许多内置绑定,但您肯定会遇到某些情况,而这些情况都不存在。对于这些,敲除提供了attring绑定,它使您可以数据将任何属性绑定到视图模型属性。参数应为javaScript对象,其中属性名称为属性,属性值是将绑定到属性的值。这在许多常见场景中非常有用,例如绑定A元素的HREF和标题或IMG元素的SRC和ALT。
添加样式<span data-bind="text: msg, visible: toggle"></span>
>您可以使用CSS和样式内置绑定将样式与淘汰赛绑定。>
> CSS绑定为关联元素设置一个或多个CSS类。该参数应为JavaScript对象,其中属性名称对应于所需的CSS类,并且评估为true或false的属性值表示是否应应用该类。您可以一次设置多个CSS类。>
您可以使用表达式来确定何时应用课程。
<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());
>最好尽可能使用CSS类,但有时您可能也需要设置特定样式。淘汰赛以其样式内置绑定为此支持,该绑定为关联元素设置一个或多个样式值。参数应为一个对象,其属性对应于CSS样式名称,并且值对应于您希望应用的样式值。通常,此参数值使用JSON声明。
<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());
注意:当您具有属性或CSS类的名称不是法律JavaScript变量名称时,则应将标识符名称包装在引号中,以使其成为字符串的字符串。而且,如果您想应用其名称不是合法JavaScript标识符的样式,则必须使用该样式的JavaScript名称。
<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());
处理事件
淘汰赛通过其内置绑定来支持任何事件的绑定。它将指定事件的事件处理程序添加到关联的DOM元素中。您可以使用它来绑定到任何定义的HTML事件。在事件处理程序中,您可以访问当前视图模型数据项,事件对象,甚至是事件绑定的一部分传递的自定义参数。要使用事件绑定,您可以通过一个包含事件名称的名称值对的对象和视图模型方法,并由逗号分隔。<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());
您可能猜到的是,点击绑定正在处理点击事件。因为它是对事件的最使用的绑定,所以它只是事件绑定的捷径。>// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>
>提交绑定是处理表单元素提交事件的快捷方式。当您在表单上使用提交绑定时,敲除将防止浏览器的默认提交措施为该表格。换句话说,浏览器将调用您的处理程序功能,但不会向服务器提交表单。这是一个有用的默认值,因为当您使用提交绑定时,通常是因为您将表单用作视图模型的接口,而不是作为常规HTML表单。如果您确实想让表单像普通的HTML表格一样提交,只需从您的提交处理程序中返回true。
>而不是在表单上使用提交,可以使用单击“提交”按钮。但是,使用提交绑定可以使用替代方法提交表格的好处,例如在输入文本框时按Enter键。
控制UI
可见绑定基于结合参数值设置关联元素的可见性。绑定尝试将任何参数转换为布尔值。敲除的可见绑定应绑定到评估对或错误的属性。这比您使用CSS定义的任何显示样式优先。
>
<span data-bind="text: msg, visible: toggle"></span>
启用/禁用绑定将根据所提供的值设置关联元素上的禁用属性。这通常用于表单元素,例如输入,选择和textarea。敲除提供内置绑定以启用和禁用输入元素。启用绑定将启用输入元素,如果属性必须评估为true,并且如果元素评估为false,则将禁用该元素。禁用绑定的完全相反
<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());
敲除具有内置的绑定命名hasfocus,它确定并设置哪个元素具有焦点。当您希望将焦点设置为表单上的特定元素时,例如搜索表单时,访问者打开页面
>时,hasfocus绑定很方便
<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());
处理复选框和无线电按钮
复选框可以是数据绑定到敲除的绑定。所检查的绑定应绑定到评估对或错误的属性或表达式。因为将视图模型属性定义为可观察到的,所以当源属性更改时,复选框会更新。同样,当用户检查或取消选中复选框时,该值将在视图模型属性中更新。此绑定设置了单个单击按钮和复选框的检查状态。对于复选框,绑定尝试将任何参数转换为布尔值。对于无线电按钮,绑定将按钮值属性与绑定参数进行比较。// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>
创建下拉列表
下拉列表具有几个重要属性,可以加载项目列表,显示值,使用其他键值并存储用户的选择。淘汰赛为每一种都提供了内置的绑定。选项绑定设置将出现在下拉列表元素中的选项。值应该是一个数组。除
绑定的选项标识要显示的值列表,通常是从视图模型上的数组属性。。
当前选择了多选列表中哪些元素的选定绑定控件。当用户在多选列表中选择或删除选择项目时,这会添加或删除视图模型上的数组的相应值。>
<span data-bind="text: msg, visible: toggle"></span>
>有时您想在下拉列表中显示一个值,但是当用户从列表中选择项目时,请使用另一个值。淘汰赛的内置选件和optionValue绑定有助于。 OptionStext绑定设置为从选项绑定中显示在下拉列表中显示的属性的字符串名称。 optionsValue绑定设置为属性的字符串名称,以绑定到下拉列表中项目的选定值。当您不想默认选择任何prticular选项时,选项会议很有用。此参数设置了一个文本,例如选项列表之上的“选择项目…”,并在未选择任何特定项目时显示。
<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());
就这部分而言,请继续关注结局,下周同一时间!>
经常询问有关淘汰赛的问题<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());
>
> junckoutjs和其他JavaScript库之间有什么区别?
junckoutjs是一个JavaScript库,可帮助开发人员创建具有干净的基础数据模型的富含,响应式显示和编辑器用户界面。与其他JavaScript库不同,QuignoutJS使用模型视图模型(MVVM)设计模式,其中模型和视图是分开的,从而更容易管理复杂的数据驱动的接口。当数据模型更改并为将UI的各个部分连接到数据模型时,它还提供自动UI刷新。将UI部分连接到数据模型的声明绑定。这意味着您可以以易于理解和维护的方式轻松地将数据绑定到HTML元素。当数据模型更改时,QuintOutJS会自动更新UI的相关部分,从而消除了对手动DOM操作的需求。
> quotigoutjs可以与其他JavaScript库一起使用吗?它不会对您的技术堆栈的其余部分做出任何假设,因此可以与其他库或框架(例如jQuery,bootstrap甚至Angularjs)集成。
> nockutjs如何处理CSS绑定? > >> nockoutjs中的观察值是什么?>
我如何将QuigentJS与服务器端技术使用?敲除可以与任何服务器端技术一起使用。它对您使用的服务器端语言不可知,因此您可以将其与PHP,.NET,Java,Ruby,Python或任何其他服务器端语言一起使用。您只需要向客户端发送JSON数据,然后使用QuintOutJS将此数据绑定到您的HTML。>
> nockoutjs如何处理形式验证? nockoutjs本身不提供任何内置的内置验证机制。但是,它可以轻松地与其他验证库(例如jQuery验证或敲除验证)进行集成,这是一个专门设计用于在QuintOutJs中形式验证的单独插件。
>我可以将quightoutjs用于移动应用程序开发吗?
虽然QuintOutJS主要是为Web开发而设计的,但它也可以与其他技术(如PhoneGap或Cordova)结合使用,可用于移动应用程序开发,这允许您要使用HTML,CSS和JavaScript创建本机应用程序。
> QuignSoutjs如何处理事件处理?
适合大规模应用程序?
是的,nockoutjs适用于小型和大型应用程序。它的MVVM设计模式使管理复杂的数据驱动接口变得更加容易,并且其可观察到的物体和绑定系统有助于保持代码的组织和可维护,即使对于大型应用程序也是如此。