BUI 表單綁定

1. 雙向綁定

b-model 僅支持 input,textarea,select3種html標(biāo)簽. 這個(gè)行為屬性做兩件事情.

• 把字段的值設(shè)置在當(dāng)前input的value;
• input輸入修改會(huì)把value的值賦值給字段.

注意: input 的type類型必須聲明是哪種類型(text,radio,checkbox)等.

案例

示例:

page.message 有3個(gè)地方用到, b-model, b-text, b-click點(diǎn)擊的時(shí)候,也會(huì)拿到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="請(qǐng)輸入關(guān)鍵字" 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>

效果預(yù)覽

查看效果

b-model 的值支持3種數(shù)據(jù)類型

• 字符串: 用于單選或輸入
• 布爾值: 用于多選
• 數(shù)組: 用于多選

2. 單選雙向

page.sex 的值是string, 會(huì)先設(shè)置回對(duì)應(yīng)的value="女"的input, name的值的sex1 不是必須的, 這個(gè)是h5用來對(duì)選擇進(jìn)行分組的. b-text 用來輸出當(dāng)前的選中值.

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. 多選雙向

案例

多選是一個(gè)數(shù)組, 里面的值會(huì)跟自己本身的值進(jìn)行比較,如果一致,會(huì)是選中狀態(tài). b-text 輸出數(shù)組會(huì)加上逗號(hào).

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. 狀態(tài)聯(lián)動(dòng)

當(dāng)b-model的值是布爾值時(shí), 加上b-show 可以根據(jù)數(shù)據(jù)的狀態(tài)來控制當(dāng)前元素的顯示或者隱藏.

var bs = bui.store({
    scope: "page",
    data: {
        show: true,
    }
})

<!-- 初始化顯示 -->
<p b-show="page.show">我是A,被控制的內(nèi)容</p>


<!-- 初始化隱藏 -->
<p b-show="!page.show">我是B,跟A相反的狀態(tài)</p>


<label><input type="checkbox" b-model="page.show" />點(diǎn)擊可以控制A和B: <span b-text="page.show"></span></label>

效果預(yù)覽

查看效果

5. 選擇列表

案例

下面只是展示 select 的用法, 實(shí)際上移動(dòng)端我們一般使用 bui.select控件.

單選

var bs = bui.store({
    scope: "page", 
    data: {
        selected: "B",                  // 單個(gè)select初始化的值
        options: [                      // 單選多選的數(shù)據(jù)源
          { 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>

多選

只是把選擇項(xiàng)變成了數(shù)組, 把select加多了個(gè)屬性 multiple.

var bs = bui.store({
    scope: "page
    data: {
        multipleSelectes: ["A","B"],    // 多選select初始化的值是一個(gè)數(shù)組
        options: [                      // 單選多選的數(shù)據(jù)源
          { 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="">請(qǐng)選擇</option>
</select>
<span>Selected: <b b-text="page.multipleSelectes"></b></span>

這里會(huì)有個(gè) b-command 屬性,用來告訴模板第1次渲染的時(shí)候使用什么方法?

• html 替換數(shù)據(jù)
• append 在后面增加數(shù)據(jù)
• prepend 在前面增加數(shù)據(jù)

單選聯(lián)動(dòng)

聯(lián)動(dòng)的示例,增加了事件綁定, $index是內(nèi)置對(duì)象,代表點(diǎn)擊當(dāng)前dom的索引, 有意思的是, 這里為什么是 $index 而不是 i ? i 是每次都從0開始的, 當(dāng)數(shù)據(jù)有增刪改以后, 索引值是不確定的, 而 $index 是根據(jù)你當(dāng)前的dom所在的索引, 這個(gè)跟數(shù)組的索引是一一對(duì)應(yīng)的. 更多內(nèi)置對(duì)象,請(qǐng)查看事件綁定章節(jié).

var bs = bui.store({
    scope: "page",
    data: {
        selectA: [                      // 聯(lián)動(dòng)select的數(shù)據(jù)源
          { 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>

效果預(yù)覽

查看效果

多選聯(lián)動(dòng)

案例

這個(gè)例子是一個(gè)自定義的模擬select, 我們放在綜合案例里面講.

彈窗選擇交互

案例