KnockoutJS - 提交绑定
此绑定用于在提交相关 DOM 元素时调用 JavaScript 函数。此绑定主要用于表单元素。
使用提交绑定时,表单实际上并未提交到服务器。KO 可防止浏览器的默认操作。如果您希望提交绑定作为真正的提交元素工作,则从处理程序函数返回 true。
语法
submit: <binding-function>
参数
此处的绑定函数将是提交事件后需要调用的主要函数。
此函数可以是任何 JavaScript 函数,不一定是 ViewModel 函数。
示例
让我们看看以下示例,该示例演示了提交绑定的使用。
<!DOCTYPE html>
<head>
<title>KnockoutJS Submit Binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<form data-bind = "submit: addition">
<p>Enter first number: <input data-bind = "value: var1" /></p>
<p>Enter second number: <input data-bind = "value: var2" /></p>
<p><button type = "submit" >Click here for addition</button></p>
</form>
<script type = "text/javascript">
function ViewModel () {
self = this;
self.var1 = ko.observable(10);
self.var2 = ko.observable(30);
self.var3 = ko.observable(0);
this.addition = function() {
self.var1(Number(self.var1()));
self.var2(Number(self.var2()));
this.var3 = self.var1() + self.var2();
alert("Addition is = "+ this.var3 );
};
};
var vm = new ViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述代码保存在 submit-bind.htm 文件中。
在浏览器中打开此 HTML 文件。
此程序将 2 个数字相加。在 KO 中,任何从 UI 接受的数据都默认被视为字符串格式,因此在进行数字操作时需要将其转换为数字格式。
请参阅点击绑定以了解更多注意事项,例如传递额外参数等。该页面上的所有注意事项也适用于提交绑定。
knockoutjs_declarative_bindings.html