表单事件绑定在 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>

事件

绑定 事件允许您为指定事件添加事件处理程序，以便在为关联的 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>
    &lt;input type=&apos;checkbox&apos; data-bind=&quot;checked: hascellphone&quot; /&gt;
    i have a cellphone
</p>
<p>
    your cellphone number:
    &lt;input type=&apos;text&apos; data-bind=&quot;value: cellphonenumber, enable: hascellphone&quot; /&gt;
</p>

<script type="text/javascript">
        ko.applybindings({
        hascellphone : ko.observable(false),
        cellphonenumber: ""
    });
</script>

价值

绑定值*绑定与*viewmodel中的属性关联的dom元素的值。这通常对于 <input>、<select> 和 <textarea> 等表单元素很有用。

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

<p>login name: &lt;input data-bind=&quot;value: username&quot; /&gt;</p>
<p>password: &lt;input type=&quot;password&quot; data-bind=&quot;value: userpassword&quot; /&gt;</p>

<script type="text/javascript">
        ko.applybindings({
        username: ko.observable(""),        // initially blank
        userpassword: ko.observable("abc"), // prepopulate
    });
</script>

绑定值与绑定结合使用，允许读取和写入任意javascript对象的值，而不仅仅是字符串.

文本输入

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

<p>login name: &lt;input data-bind=&quot;textinput: username&quot; /&gt;</p>
<p>password: &lt;input type=&quot;password&quot; data-bind=&quot;textinput: userpassword&quot; /&gt;</p>

viewmodel:
<pre data-bind="text: ko.tojson($root, null, 2)">

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

具有焦点

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

<input data-bind="hasfocus: isselected" />
<button data-bind="click: setisselected">focus programmatically</button>
<span data-bind="visible: isselected">the textbox has focus</span>

<script type="text/javascript">
        ko.applybindings({
            isselected: ko.observable(false),
            setisselected: function() { this.isselected(true) }
        });
</script>

已检查

绑定选中绑定一个可勾选的表单控件，即一个复选框（<input type='checkbox'>）或一个单选按钮（<input type='radio'>），其属性位于 viewmodel.

<p>check 1 (checked): &lt;input type=&quot;checkbox&quot; data-bind=&quot;checked: checkyes&quot; /&gt;</p>
<p>check 2 (unchecked): &lt;input type=&quot;checkbox&quot; data-bind=&quot;checked: checkno&quot; /&gt;</p> 

<script type="text/javascript">
    ko.applybindings({
        checkyes: ko.observable(true),
        checkno: ko.observable(false)
    });
</script>

选项

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

分配的值必须是数组（或observable array）。然后 <select> 元素将为 数组 .
中的每个项目显示一个项目

<p>
    destination country:
    &lt;select data-bind=&quot;options: availablecountries&quot;&gt;&lt;/select&gt;
    &lt;input data-bind=&quot;value: newcountry&quot;/&gt;
    <button data-bind="click: addcountry">add country</button>
</p>

<script type="text/javascript">
    ko.applybindings({
        addcountry: function() {
            this.availablecountries.push(this.newcountry());
        },
        newcountry: ko.observable(),        
        availablecountries: ko.observablearray(['argentina', 'brazil', 'chile'])
    });
</script>

选定的选项

绑定 selectedoptions 控制当前选择多选列表中的哪些元素。它旨在与 <select> 元素和选项绑定结合使用。

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

<p>choose some countries you'd like to visit:</p>
&lt;select data-bind=&quot;options: availablecountries, selectedoptions: chosencountries&quot; size=&quot;5&quot; multiple=&quot;true&quot;&gt;&lt;/select&gt;

<script type="text/javascript">
    ko.applybindings({
        availablecountries : ko.observablearray(['france', 'germany', 'spain']),
        chosencountries : ko.observablearray(['germany']) // initially, only germany is selected
    });
</script>

唯一名称

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

<input data-bind="value: someModelProperty, uniqueName: true" />

以上就是《表单事件绑定在 KnockoutJs 中如何工作》的详细内容，更多关于的资料请关注golang学习网公众号！