此内容基本上是原始材料的翻译。目的是了解 magento 2 的 knockoutjs 并用葡萄牙语创建有关 knockoujs 的内容。
文档
数据绑定语法绑定上下文“点击”绑定“事件”绑定“提交”绑定“启用”和“禁用”绑定“值”绑定“textinput”绑定“hasfocus”绑定“已检查”绑定“选项”绑定“selectedoptions”绑定“uniquename”绑定
绑定
在 knockoutjs 中，绑定 是连接 viewmodel 逻辑（数据和业务逻辑）与 view (html) 的方式。简而言之，正是通过 绑定，用户界面自动反映数据的变化，而不需要直接操作 dom。
knockoutj 中的绑定通过 html 元素上的 data-bind 属性进行工作。您可以在该属性中指定要使用的绑定和关联值。
表单事件
点击
绑定 单击添加了一个事件处理程序，以便在单击关联的 dom 元素时调用所选的 javascript 函数。这最常用于带有标签
每次单击该元素时，都会调用 viewmodel 中传递的方法，该方法又会更改 viewmodel 的状态，从而导致 ui已更新。
you've clicked timesko.applybindings({ numberofclicks : ko.observable(0), incrementclickcounter : function() { var previouscount = this.numberofclicks(); this.numberofclicks(previouscount + 1); } });
默认情况下，knockoutjs 将阻止 click 事件执行任何标准操作。这意味着当在 标签中使用 绑定 click 时，浏览器将只调用该函数，而不会导航到链接的 href。当您使用链接作为操作 viewmodel 的 ui 的一部分时，通常会使用单击绑定，而不是作为指向另一个网页的普通超链接。如果标准点击操作需要继续，只需在函数中返回 true 即可。
事件
绑定 事件允许您为指定事件添加事件处理程序，以便在为关联的 dom 元素触发该事件时调用所选的 javascript 函数。这可用于绑定任何事件，例如按键、鼠标悬停或鼠标退出。
ko.applybindings({ detailsenabled: ko.observable(false), enabledetails: function() { this.detailsenabled(true); }, disabledetails: function() { this.detailsenabled(false); } });mouse over medetails
提交
绑定提交 *是表单上的提交绑定指令，将阻止浏览器对该表单的默认提交操作，换句话说，浏览器将调用处理函数，但不会将表单发送到服务器。当表单用作 viewmodel 的接口（而不是普通的 html 表单）时，通常会使用 *submit 绑定。如果表单需要作为普通 html 表单提交，只需从提交处理程序返回 true 即可。
ko.applybindings({ this.dosomething = function(formelement) { // ... now do something } });
启用/禁用
绑定 enable 会导致关联的 dom 元素在其参数值为 true 时被启用。 绑定 disable 以相反的方式工作，导致关联的 dom 元素在其值为 true 时被禁用。
i have a cellphone
your cellphone number:
ko.applybindings({ hascellphone : ko.observable(false), cellphonenumber: "" });
价值
绑定值*绑定与*viewmodel中的属性关联的dom元素的值。这通常对于 、 和
当用户编辑关联表单控件中的值时，viewmodel 中的值将被更新。同样，当 viewmodel 更新值时，这将更新屏幕上表单控件的值。
login name:
password:
ko.applybindings({ username: ko.observable(""), // initially blank userpassword: ko.observable("abc"), // prepopulate });
绑定值与绑定结合使用，允许读取和写入任意javascript对象的值，而不仅仅是字符串.
值
文本输入
绑定 textinput 将字段（ 或
login name:
password:
viewmodel:
默认情况下，绑定 textinput 仅在用户将焦点从文本框移开时更新其模型。 绑定 textinput 通过每次击键或其他文本输入机制立即更新其模型。
具有焦点
绑定 hasfocus 将 dom 元素的焦点状态绑定到 viewmodel 属性。这是一种双向连接，当 viewmodel 属性设置为 true 或 false 时，关联元素将获得焦点或不焦点。
the textbox has focus ko.applybindings({ isselected: ko.observable(false), setisselected: function() { this.isselected(true) } });
已检查
绑定选中绑定一个可勾选的表单控件，即一个复选框（）或一个单选按钮（），其属性位于 viewmodel.
check 1 (checked):
check 2 (unchecked):
ko.applybindings({ checkyes: ko.observable(true), checkno: ko.observable(false) });
选项
绑定选项控制哪些选项应出现在下拉列表（）或多选列表（）中。此绑定不能与 元素以外的任何元素一起使用。
分配的值必须是数组（或observable array）。然后 元素将为 数组 .
中的每个项目显示一个项目
destination country:
ko.applybindings({ addcountry: function() { this.availablecountries.push(this.newcountry()); }, newcountry: ko.observable(), availablecountries: ko.observablearray(['argentina', 'brazil', 'chile']) });
选定的选项
绑定 selectedoptions 控制当前选择多选列表中的哪些元素。它旨在与 元素和选项绑定结合使用。
当用户选择或取消选择多选列表中的某个项目时，会向 viewmodel 中的数组添加或删除相应的值。同样，假设它是 viewmodel 中的 observable array，每当您从该 array 添加或删除项目时，ui 中的相应项目都会被选择或取消选择。这是双向连接。
choose some countries you'd like to visit:
ko.applybindings({ availablecountries : ko.observablearray(['france', 'germany', 'spain']), chosencountries : ko.observablearray(['germany']) // initially, only germany is selected });
唯一名称
绑定 uniquename 确保绑定的 dom 元素具有非空名称属性。如果 dom 元素没有 name 属性，此绑定将提供一个并将其设置为某个唯一的字符串值。
以上就是表单事件绑定在 KnockoutJs 中如何工作的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1499003.html
微信扫一扫 
支付宝扫一扫 
