表单事件绑定在 KnockoutJs 中如何工作

此内容基本上是原始材料的翻译。目的是了解 Magento 2 的 KnockoutJs 并用葡萄牙语创建有关 KnockouJs 的内容。

文档

• 数据绑定语法
• 绑定上下文
• “点击”绑定
• “事件”绑定
• “提交”绑定
• “启用”和“禁用”绑定
• “值”绑定
• “textInput”绑定
• “hasFocus”绑定
• “已检查”绑定
• “选项”绑定
• “selectedOptions”绑定
• “uniqueName”绑定

---

绑定

在 KnockoutJs 中，绑定 是连接 ViewModel 逻辑（数据和业务逻辑）与 View (HTML) 的方式。简而言之，正是通过 绑定，用户界面自动反映数据的变化，而不需要直接操作 DOM。

KnockoutJ 中的绑定通过 HTML 元素上的 data-bind 属性进行工作。您可以在该属性中指定要使用的绑定和关联值。

表单事件

点击

绑定 单击添加了一个事件处理程序，以便在单击关联的 DOM 元素时调用所选的 JavaScript 函数。这最常用于标记为 、 的元素。和 ，但它实际上适用于任何可见的 DOM 元素。 KnockoutJs 将提供当前模型值作为第一个参数。

每次单击该元素时，都会调用 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>
    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>

提交

绑定提交 *是表单上的提交绑定指令，将阻止浏览器对该表单的默认提交操作，换句话说，浏览器将调用处理函数，但不会将表单发送到服务器。当表单用作 ViewModel 的接口（而不是普通的 HTML 表单）时，通常会使用 *submit 绑定。如果表单需要作为普通 HTML 表单提交，只需从提交处理程序返回 true 即可。

<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>

启用/禁用

绑定 enable 会导致关联的 DOM 元素在其参数值为 true 时被启用。 绑定 disable 以相反的方式工作，导致关联的 DOM 元素在其值为 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>

价值

绑定值*绑定与*ViewModel中的属性关联的DOM元素的值。这通常对于 、 等表单元素很有用。和。

当用户编辑关联表单控件中的值时，ViewModel 中的值将被更新。同样，当 ViewModel 更新值时，这将更新屏幕上表单控件的值。

<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>

绑定值与结合使用。允许读取和写入任意 JavaScript 对象的值，而不仅仅是 string.

值

文本输入

绑定 textInput 将字段（ 或 ）绑定到 <em>ViewModel</em> 属性，在 <em>ViewModel</em> 属性之间提供双向更新和元素的值。 <em>绑定</em> textInput 为所有类型的用户输入提供即时 DOM 更新，包括自动完成、拖放和剪贴板事件。<br>

<p>Login name: <input data-bind="value: userName" /></p>
<p>Password: <input type="password" data-bind="value: userPassword" /></p>

<script type="text/javascript">
        ko.applyBindings({
        userName: ko.observable(""),        // Initially blank
        userPassword: ko.observable("abc"), // Prepopulate
    });
</script>

默认情况下，绑定 textInput 仅在用户将焦点从文本框移开时更新其模型。 绑定 textInput 通过每次击键或其他文本输入机制立即更新其模型。

具有焦点

绑定 hasFocus 将 DOM 元素的焦点状态绑定到 ViewModel 属性。这是一种双向连接，当 ViewModel 属性设置为 true 或 false 时，关联元素将获得焦点或不焦点。

<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>

已检查

选中的绑定绑定一个可勾选的表单控件，即一个复选框（）或一个单选按钮（） ViewModel.
中的属性

<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>

选项

绑定选项控制哪些选项应出现在下拉列表（）或多选列表（）中。此链接不能与 元素以外的任何元素一起使用。

分配的值必须是数组（或Observable Array）。 然后它将为您的数组中的每个项目显示一个项目。

<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>

选定的选项

绑定 selectedOptions 控制当前选择多选列表中的哪些元素。它旨在与 结合使用。以及选项链接。

当用户选择或取消选择多选列表中的某个项目时，会向 ViewModel 中的数组添加或删除相应的值。同样，假设它是 ViewModel 中的 Observable Array，每当您从该 array 添加或删除项目时，UI 中的相应项目都会被选择或取消选择。这是双向连接。

<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>

唯一名称

绑定 uniqueName 确保绑定的 DOM 元素具有非空名称属性。如果 DOM 元素没有 name 属性，此连接将提供一个并将其设置为某个唯一的字符串值。

<p>Login name: <input data-bind="value: userName" /></p>
<p>Password: <input type="password" data-bind="value: userPassword" /></p>

<script type="text/javascript">
        ko.applyBindings({
        userName: ko.observable(""),        // Initially blank
        userPassword: ko.observable("abc"), // Prepopulate
    });
</script>

以上是表单事件绑定在 KnockoutJs 中如何工作的详细内容。更多信息请关注PHP中文网其他相关文章！