LOGO

表单

编辑本文

表单是常见的用户输入承载元素，本篇介绍一些常用表单元素的用法。在 MVVM 中，我们一般在用户输入的表单元素或组件上应用 双向绑定。

输入框

输入框的绑定方法比较简单，直接对输入框的 value 属性应用双向绑定就行了。

1
<input type="text" value="{= name =}">

checkbox

checkbox 常见的使用场景是分组，在组件模板中，我们把需要分组的 checkbox 将 checked 属性双向绑定到同名的组件数据中。

提示：除非你需要进行传统的表单提交，否则无需指定 checkbox 的 name 属性。San 仅以 checked 作为分组的依据。

1
2
3
4
5
6
<!-- Template -->
<div>
    <label><input type="checkbox" value="errorrik" checked="{= online =}">errorrik</label>
    <label><input type="checkbox" value="otakustay" checked="{= online =}">otakustay</label>
    <label><input type="checkbox" value="firede" checked="{= online =}">firede</label>
</div>

我们期望 checkbox 绑定到的数据项是一个 Array<string> 。当 checkbox 被选中时，其 value 会被添加到绑定的数据项中；当 checkbox 被取消选中时，其 value 会从绑定数据项中移除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Component
san.defineComponent({
    // ...

    initData: function () {
        return {
            online: []
        };
    },

    attached: function () {
        this.data.set('online', ['errorrik', 'otakustay']);
    }
});

radio

与 checkbox 类似，我们在组件模板中，把需要分组的 radio 将 checked 属性绑定到同名的组件数据中。

提示：你需要手工指定分组 radio 的 name 属性，使浏览器能处理 radio 选择的互斥。可以把它设置成与绑定数据的名称相同。

1
2
3
4
5
6
<!-- Template -->
<div>
    <label><input type="radio" value="errorrik" checked="{= online =}" name="online">errorrik</label>
    <label><input type="radio" value="otakustay" checked="{= online =}" name="online">otakustay</label>
    <label><input type="radio" value="firede" checked="{= online =}" name="online">firede</label>
</div>

我们期望 radio 绑定到的数据项是一个 string 。当 radio 被选中时，绑定的数据项值被设置成选中的 radio 的 value 属性值。

1
2
3
4
5
6
7
8
9
10
// Component
san.defineComponent({
    // ...

    initData: function () {
        return {
            online: 'errorrik'
        };
    }
});

select

select 的使用方式和输入框类似，直接对 value 属性应用双向绑定。

1
2
3
4
5
6
<!-- Template -->
<select value="{= online =}">
    <option value="errorrik">errorrik</option>
    <option value="otakustay">otakustay</option>
    <option value="firede">firede</option>
</select>

提示：在浏览器中，select 的 value 属性并不控制其选中项，select 的选中项是由 option 的 selected 属性控制的。考虑到开发的方便，开发者不需要编写 option 的 selected 属性，San 会在下一个视图更新时间片中刷新 select 的选中状态。

1
2
3
4
5
6
7
8
9
10
// Component
san.defineComponent({
    // ...

    initData: function () {
        return {
            online: 'errorrik'
        };
    }
});
© 2021 Baidu EFE