表单事件绑定在 KnockoutJs 中如何工作
目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《表单事件绑定在 KnockoutJs 中如何工作》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~
此内容基本上是原始材料的翻译。目的是了解 magento 2 的 knockoutjs 并用葡萄牙语创建有关 knockoujs 的内容。
文档
- 数据绑定语法
- 绑定上下文
- “点击”绑定
- “事件”绑定
- “提交”绑定
- “启用”和“禁用”绑定
- “值”绑定
- “textinput”绑定
- “hasfocus”绑定
- “已检查”绑定
- “选项”绑定
- “selectedoptions”绑定
- “uniquename”绑定
绑定
在 knockoutjs 中，绑定 是连接 viewmodel 逻辑（数据和业务逻辑）与 view (html) 的方式。简而言之，正是通过 绑定，用户界面自动反映数据的变化，而不需要直接操作 dom。
knockoutj 中的绑定通过 html 元素上的 data-bind 属性进行工作。您可以在该属性中指定要使用的绑定和关联值。
表单事件
点击
绑定 单击添加了一个事件处理程序，以便在单击关联的 dom 元素时调用所选的 javascript 函数。这最常用于带有标签
每次单击该元素时，都会调用 viewmodel 中传递的方法，该方法又会更改 viewmodel 的状态，从而导致 ui已更新。
<div>
you've clicked <span data-bind="text: numberofclicks"></span> times
<button data-bind="click: incrementclickcounter">click me</button>
</div>
<script type="text/javascript">
ko.applybindings({
numberofclicks : ko.observable(0),
incrementclickcounter : function() {
var previouscount = this.numberofclicks();
this.numberofclicks(previouscount + 1);
}
});
</script>
默认情况下，knockoutjs 将阻止 click 事件执行任何标准操作。这意味着当在 标签中使用 绑定 click 时，浏览器将只调用该函数，而不会导航到链接的 href。当您使用链接作为操作 viewmodel 的 ui 的一部分时，通常会使用单击绑定，而不是作为指向另一个网页的普通超链接。如果标准点击操作需要继续，只需在函数中返回 true 即可。
事件
绑定 事件允许您为指定事件添加事件处理程序，以便在为关联的 dom 元素触发该事件时调用所选的 javascript 函数。这可用于绑定任何事件，例如按键、鼠标悬停或鼠标退出。
<div>
<div data-bind="event: { mouseover: enabledetails, mouseout: disabledetails }">
mouse over me
</div>
<div data-bind="visible: detailsenabled">
details
</div>
</div>
<script type="text/javascript">
ko.applybindings({
detailsenabled: ko.observable(false),
enabledetails: function() {
this.detailsenabled(true);
},
disabledetails: function() {
this.detailsenabled(false);
}
});
</script>
提交
绑定提交 *是表单上的提交绑定指令，将阻止浏览器对该表单的默认提交操作，换句话说，浏览器将调用处理函数，但不会将表单发送到服务器。当表单用作 viewmodel 的接口（而不是普通的 html 表单）时，通常会使用 *submit 绑定。如果表单需要作为普通 html 表单提交，只需从提交处理程序返回 true 即可。
<form data-bind="submit: dosomething">
<button type="submit">submit</button>
</form>
<script type="text/javascript">
ko.applybindings({
this.dosomething = function(formelement) {
// ... now do something
}
});
</script>
启用/禁用
绑定 enable 会导致关联的 dom 元素在其参数值为 true 时被启用。 绑定 disable 以相反的方式工作，导致关联的 dom 元素在其值为 true 时被禁用。
<p>
<input type='checkbox' data-bind="checked: hascellphone" />
i have a cellphone
</p>
<p>
your cellphone number:
<input type='text' data-bind="value: cellphonenumber, enable: hascellphone" />
</p>
<script type="text/javascript">
ko.applybindings({
hascellphone : ko.observable(false),
cellphonenumber: ""
});
</script>
价值
绑定值*绑定与*viewmodel中的属性关联的dom元素的值。这通常对于 、