表单绑定

1. 双向绑定

注意: input 的 type 类型必须声明是哪种类型(text,radio,checkbox)等.

示例:

page.message 有 3 个地方用到, b-model, b-text, b-click点击的时候,也会拿到message去做处理.

var bs = bui.store({
  scope: "page",
  data: {
    message: "Hello bui.js",
  },
  methods: {
    reverseMessage: function (e) {
      var a = this.message.split(" ").reverse().join(" ");
      this.message = a;
    },
  },
});
<div id="searchbar" class="bui-searchbar bui-box">
  <div class="span1">
    <div class="bui-input">
      <i class="icon-search"></i>
      <input
        type="text"
        value=""
        placeholder="请输入关键字"
        b-model="page.message"
      />
    </div>
  </div>
</div>
<div class="section-title">
  正在输入:
  <span class="result" b-text="page.message"></span>
  <div class="bui-btn" b-click="page.reverseMessage">反序输入值</div>
</div>

效果预览

查看效果

b-model 的值支持 3 种数据类型

  • 字符串: 用于单选或输入
  • 布尔值: 用于多选
  • 数组: 用于多选

2. 单选双向

page.sex 的值是string, 会先设置回对应的value="女"的 input, name 的值的 sex1 不是必须的, 这个是 h5 用来对选择进行分组的. b-text 用来输出当前的选中值.

var bs = bui.store({
  scope: "page",
  data: {
    sex: "女",
  },
});
<label
  ><input type="radio" name="sex1" value="" b-model="page.sex" /></label
>
<label
  ><input type="radio" name="sex1" value="" b-model="page.sex" /></label
>

性别: <span b-text="page.sex"></span>

3. 多选双向

多选是一个数组, 里面的值会跟自己本身的值进行比较,如果一致,会是选中状态. b-text 输出数组会加上逗号.

var bs = bui.store({
  scope: "page",
  data: {
    citys: ["广州", "深圳"],
  },
});
<label
  ><input
    type="checkbox"
    name="city"
    value="广州"
    b-model="page.citys"
  />广州</label
>
<label
  ><input
    type="checkbox"
    name="city"
    value="汕头"
    b-model="page.citys"
  />汕头</label
>
<label
  ><input
    type="checkbox"
    name="city"
    value="深圳"
    b-model="page.citys"
  />深圳</label
>
<label
  ><input
    type="checkbox"
    name="city"
    value="东莞"
    b-model="page.citys"
  />东莞</label
>

<div class="section-title">多选: 城市: <span b-text="page.citys"></span></div>

4. 状态联动

b-model的值是布尔值时, 加上b-show 可以根据数据的状态来控制当前元素的显示或者隐藏.

var bs = bui.store({
  scope: "page",
  data: {
    show: true,
  },
});
<!-- 初始化显示 -->
<p b-show="page.show">我是A,被控制的内容</p>

<!-- 初始化隐藏 -->
<p b-show="!page.show">我是B,跟A相反的状态</p>

<label
  ><input type="checkbox" b-model="page.show" />点击可以控制A和B:
  <span b-text="page.show"></span
></label>

效果预览

查看效果

5. 选择列表

下面只是展示 select 的用法, 实际上移动端我们一般使用 bui.select控件.

单选

var bs = bui.store({
  scope: "page",
  data: {
    selected: "B", // 单个select初始化的值
    options: [
      // 单选多选的数据源
      { text: "One", value: "A" },
      { text: "Two", value: "B" },
      { text: "Three", value: "C" },
    ],
  },
  templates: {
    tplSelect: function (data) {
      var html = "";
      data.forEach(function (item, i) {
        // value 属性必须有
        html += `<option value="${item.value}">${item.text}</option>`;
      });
      return html;
    },
  },
});
<select
  b-model="page.selected"
  b-template="page.tplSelect(page.options)"
></select>
<span>Selected: <b b-text="page.selected"></b></span>

多选

只是把选择项变成了数组, 把select加多了个属性 multiple.

var bs = bui.store({
    scope: "page
    data: {
        multipleSelectes: ["A","B"],    // 多选select初始化的值是一个数组
        options: [                      // 单选多选的数据源
          { text: 'One', value: 'A' },
          { text: 'Two', value: 'B' },
          { text: 'Three', value: 'C' }
        ]
    },
    templates: {
        // 单选多选共用模板
        tplSelect: function (data) {
            var html ='';
            data.forEach(function (item,i) {
                // value 属性必须有
                html +=`<option value="${item.value}">${item.text}</option>`
            })
            return html;
        }
    }
})
<select
  b-model="page.multipleSelectes"
  multiple
  b-template="tplSelect(page.options)"
  b-command="append"
>
  <option disabled value="">请选择</option>
</select>
<span>Selected: <b b-text="page.multipleSelectes"></b></span>

这里会有个 b-command 属性,用来告诉模板第 1 次渲染的时候使用什么方法?

  • html 替换数据
  • append 在后面增加数据
  • prepend 在前面增加数据

单选联动

联动的示例,增加了事件绑定, $index是内置对象,代表点击当前 dom 的索引, 有意思的是, 这里为什么是 $index 而不是 i ? i 是每次都从 0 开始的, 当数据有增删改以后, 索引值是不确定的, 而 $index 是根据你当前的 dom 所在的索引, 这个跟数组的索引是一一对应的. 更多内置对象,请查看事件绑定章节.

var bs = bui.store({
  scope: "page",
  data: {
    selectA: [
      // 联动select的数据源
      { text: "One", value: "A" },
      { text: "Two", value: "B" },
      { text: "Three", value: "C" },
    ],
    selectB: [],
  },
  methods: {
    addToB: function (index) {
      this.selectB.push(this.selectA[index]);
      this.selectA.splice(index, 1);
    },
    addToA: function (index) {
      this.selectA.push(this.selectB[index]);
      this.selectB.splice(index, 1);
    },
  },
  templates: {
    tplSelectA: function (data) {
      var html = "";
      data.forEach(function (item, i) {
        // value 属性必须有
        html += `<option value="${item.value}" b-click='page.addToB($index)'>${item.text}</option>`;
      });
      return html;
    },
    tplSelectB: function (data) {
      var html = "";
      data.forEach(function (item, i) {
        html += `<option value="${item.value}" b-click='page.addToA($index)'>${item.text}</option>`;
      });
      return html;
    },
  },
});
<div class="bui-box">
  <div class="span1">
    <select
      b-template="page.tplSelectA(page.selectA)"
      class="bui-select"
      multiple
    ></select>
  </div>
  <div class="span1">
    <select
      b-template="page.tplSelectB(page.selectB)"
      class="bui-select"
      multiple
    ></select>
  </div>
</div>

效果预览

查看效果

多选联动

这个例子是一个自定义的模拟 select, 我们放在综合案例里面讲.

弹窗选择交互

5.动态表单

Copyright ©2017-2022 easybui.com all right reserved,powered by Gitbook该文件修订时间: 2022-04-25 14:27:45

results matching ""

    No results matching ""