综合案例

1. 待办处理

核心思路: 定义了3个字段.

  • todo 是当前已有的数据, 会通过 b-template 进行渲染.
  • todoText 搜索框的默认文本, 如果空则显示placeholder, 通过 b-model 进行关联.
  • nextTodoId 这个是数据的自增字段, 不是必须, 可以使用唯一id来处理.

定义了一个方法, 通过 b-click 进行绑定. 点击的时候, 检验字段是否为空, 不为空则增加一条待办.

模板里面还通过b-click 绑定了一个removeTodo 删除的方法, 通过索引删除, 这里用到一个动态索引, 这个是内置的, 前面在事件绑定章节已经讲过. 有增删改的数据, i 拿到的是固定的值.

  2. var bs = bui.store({
  3.     scope: "page", 
  4.     data: {
  5.         todo: [{
  6.             id: 1,
  7.             title: "参加项目会议"
  8.         },{
  9.             id: 2,
  10.             title: "项目启动会"
  11.         },{
  12.             id: 3,
  13.             title: "看电影"
  14.         }],
  15.         todoText: "",
  16.         nextTodoId: 4
  17.     },
  18.     methods: {
  19.         addTodo: function (e) {
  21.             if( this.todoText ){
  22.                 this.todo.push({
  23.                     id: this.nextTodoId++,
  24.                     title:this.todoText
  25.                 })
  26.                 this.todoText = "";
  27.             }else{
  28.                 bui.hint("请填写待办事项")
  29.             }
  30.         },
  31.         removeTodo: function (index) {
  32.             // 方法1: 通过索引删除
  33.             this.todo.splice(index,1);
  34.             this.todoText = "";
  35.         }
  36.     },
  37.     templates: {
  38.         tplTodo: function (data) {
  39.             var _self = this;
  40.             var html = "";
  41.             data.forEach(function (item,i) {
  43.                 html += `<li id="${item.id}" class="bui-btn bui-box">
  44.                             <div class="span1">${item.title}</div>
  45.                             <i b-click="page.removeTodo($parentIndex)" class="icon-remove large"></i>
  46.                         </li>`;
  47.             })
  48.             return html;
  49.         }
  50.     }
  51. })

核心html

  1. <!-- 搜索条控件结构 -->
  2. <div class="bui-searchbar bui-box">
  3.     <div class="span1">
  4.         <div class="bui-input">
  5.             <i class="icon-search"></i>
  6.             <input type="text" value="" placeholder="请输入待办" b-model="page.todoText" />
  7.             <div class="bui-btn" b-click="page.addTodo">添加</div>
  8.         </div>
  9.     </div>
  10. </div>
  11. <!-- 数组todo lendth 改变的时候,不会自动触发,需要监听 page.todo 数组改变 -->
  12. <div class="section-title">待办事项: <b b-text="page.todo.length"></b></div>
  13. <ul b-template="page.tplTodo(page.todo)" class="bui-list"></ul>

预览

查看效果

2. 弹窗选择交互

如果数据一开始有值,还需要把值跟模板里的数据进行比对,处理成选中状态.

js

  1. var bs = bui.store({
  2.         scope: "page", // 用于区分公共数据及当前数据的唯一值
  3.         data: {
  4.             items: [{
  5.                 id: "guangzhou",
  6.                 name: "广州",
  7.             }, {
  8.                 id: "shenzhen",
  9.                 name: "深圳",
  10.             }, {
  11.                 id: "dongguan",
  12.                 name: "东莞",
  13.             }],
  14.             checked: ["shenzhen"], //缓存选中的值, 默认选中深圳
  15.             checkedObj: [{
  16.                 id: "shenzhen",
  17.                 name: "深圳",
  18.             }],
  19.         },
  20.         methods: {
  21.             open: function() {
  22.                 this.uiDialog.open();
  23.             }
  24.         },
  25.         watch: {
  26.             checked: function(val) {
  27.                 var _self = this;
  28.                 // 获取的使用 this.$data.xxx
  29.                 var items = bui.array.getAll(_self.$data.items, val, "id");
  31.                 // 替换新的值 this.xxx
  32.                 bui.array.replace(this.checkedObj, items);
  33.             }
  34.         },
  35.         computed: {},
  36.         templates: {
  37.             tplItem: function(data) {
  38.                 var html = "";
  40.                 data.forEach(function(item, i) {
  41.                     html += `<li class="bui-btn" id="${item.id}">${item.name}</li>`
  42.                 })
  44.                 return html;
  45.             },
  46.             tplCity: function(data) {
  47.                 var html = "";
  48.                 var _self = this;
  49.                 data.forEach(function(item, i) {
  50.                     // 渲染已经选择的城市
  51.                     var hasChoose = _self.checkedObj && bui.array.compare(_self.checkedObj, item.id, "id");
  52.                     var hasChecked = hasChoose ? "checked" : "";
  53.                     html += `<li class="bui-btn bui-box bui-btn-line">
  54.                       <div class="span1">
  55.                           <label for="interest+${i}">${item.name}</label>
  56.                       </div>
  57.                       <input id="interest+${i}" type="checkbox" class="bui-choose" name="interest" value="${item.id}" text="" ${hasChecked} b-model="page.checked">
  58.                   </li>`
  59.                 })
  61.                 return html;
  62.             }
  63.         },
  64.         mounted: function() {
  65.             // 加载后执行
  67.             this.uiDialog = bui.dialog({
  68.                 id: "#uiDialog"
  69.             });
  71.         }
  72.     })

注意: checkedObj: null 数组如果需要通过this.checkedObj = []赋值操作, 先设置为空; 如果初始值是数组, 则需要通过 bui.array.xxx 去操作才会触发界面响应.

核心html

  1. <div class="bui-page page-store">
  2.     <main>
  3.         <div class="bui-btn" b-click="page.open()">点击选择喜欢的城市</div>
  4.         <div class="subtitle">您已选择:</div>
  5.         <!-- 列表控件 html 对应的结构:  -->
  6.         <ul class="bui-list" b-template="page.tplItem(page.checkedObj)"></ul>
  7.     </main>
  8.     <!-- 对话框需要在 bui-page 里面, 这样默认才会解析 b- 行为属性的值 page.xxx  -->
  9.     <div id="uiDialog" class="bui-dialog">
  10.         <div class="bui-dialog-head">选择喜欢的城市</div>
  11.         <div class="bui-dialog-main">
  12.           <ul class="bui-list" b-template="page.tplCity(page.items)"></ul>
  13.         </div>
  14.         <div class="bui-dialog-close"><i class="icon-close"></i></div>
  15.     </div>
  16. </div>

预览

查看效果

3. 多选联动复杂场景

2.1 简单思路版

在data设计了4个字段, 分别是:

  • selectA A的数据源
  • selectB B的数据源
  • selectAChecked A的选中暂存区
  • selectBChecked B的选中暂存区

定义了4个方法:

  • modifyStatusA 点击以后修改A的激活状态, 并把数据存到A暂存区
  • modifyStatusB 点击以后修改B的激活状态, 并把数据存到B暂存区
  • addToB 合并A的选中数据到B的数据源里面, 数据改变会自动渲染到视图
  • addToA 合并B的选中数据到A的数据源里面, 数据改变会自动渲染到视图

操作数据便会更新视图. 代码有点多, 但是理清了思路,我们后面再看优化版.

  1. var bs = bui.store({
  2.     scope: "page", 
  3.     data: {
  4.         selectAChecked: [], // A区选中暂存区
  5.         selectBChecked: [], // B区选中暂存区
  6.         selectA: [          // 联动select的数据源
  7.           { text: 'One', value: 'A', selected: false },
  8.           { text: 'Two', value: 'B', selected: false },
  9.           { text: 'Three', value: 'C', selected: false }
  10.         ],
  11.         selectB: [],
  12.     },
  13.     methods: {
  14.         modifyStatusA: function (index) {
  16.             var selectedItem = this.selectA[index],
  17.                 selecteds = this.selectAChecked,
  18.                 // 判断是否唯一
  19.                 indexs = bui.array.index(this.selectA[index].value,selecteds,"value");
  21.             // 选中暂存区的增加或减少
  22.             if( indexs > -1 ){
  23.                 selecteds.splice(indexs,1);
  24.             }else{
  25.                 selecteds.push(selectedItem);
  26.             }
  28.             // 修改选中状态
  29.             this.selectA[index].selected = !this.selectA[index].selected;
  30.             // 替换整条数据并触发数据变更
  31.             bui.array.set(this.selectA,index,this.selectA[index]);
  32.         },
  33.         modifyStatusB: function (index) {
  34.             var selectedItem = this.selectB[index],
  35.                 selecteds = this.selectBChecked,
  36.                 indexs = bui.array.index(this.selectB[index].value,selecteds,"value");
  38.             // 选中暂存区的增加或减少
  39.             if( indexs > -1 ){
  40.                 selecteds.splice(indexs,1);
  41.             }else{
  42.                 selecteds.push(selectedItem);
  43.             }
  45.             // 更新字段
  46.             this.selectB[index].selected = !this.selectB[index].selected;
  47.             // 替换整条数据并触发数据变更
  48.             bui.array.set(this.selectB,index,this.selectB[index]);
  49.         },
  50.         addToB: function (e) {
  51.             // 删除选中状态
  52.             this.selectAChecked.forEach(function(item,i){
  53.                 item.selected = false;
  54.             })
  55.             // 合并并触发 this.selectB
  56.             bui.array.merge(this.selectB,this.selectAChecked);
  57.             // 删除this.selectA选中数据,通过value字段比对,支持多个
  58.             bui.array.remove(this.selectA,this.selectAChecked,"value")
  60.             // 清空A暂存区数据
  61.             bui.array.empty(this.selectAChecked);
  62.         },
  63.         addToA: function (e) {
  64.             // 删除选中状态
  65.             this.selectBChecked.forEach(function(item,i){
  66.                 item.selected = false;
  67.             })
  68.             // 合并并触发 this.selectA
  69.             bui.array.merge(this.selectA,this.selectBChecked);
  71.             // 删除选中数据,通过value字段比对
  72.             bui.array.remove(this.selectB,this.selectBChecked,"value")
  73.             // 清空B暂存区数据
  74.             bui.array.empty(this.selectBChecked);
  75.         },
  76.     },
  77.     templates: {
  78.         // 联动的示例,增加了事件绑定
  79.         tplSelectA: function (data,te) {
  80.             var html ='';
  81.             data.forEach(function (item,i) {
  82.                 var active = item.selected ? "active" : "";
  83.                 html +=`<li b-click='page.modifyStatusA($index)' class="bui-btn ${active}">${item.text}</li>`;
  84.             })
  85.             return html;
  86.         },
  87.         tplSelectB: function (data) {
  88.             var html ='';
  89.             data.forEach(function (item,i) {
  90.                 var active = item.selected ? "active" : "";
  91.                 html +=`<li b-click='page.modifyStatusB($index)' class="bui-btn ${active}">${item.text}</li>`
  92.             })
  93.             return html;
  94.         }
  95.     }
  96. })

核心的html绑定

  1. <style type="text/css">
  2.     .bui-select .active {
  3.         color: red;
  4.     }
  5. </style>
  6. <div class="bui-box">
  7.     <div class ="span1">
  8.         <h2 class="bui-box"><b b-text="page.selectAChecked.length"></b>/<b b-text="page.selectA.length"></b></h2>
  9.         <div class="bui-select" b-template="page.tplSelectA(page.selectA)">
  10.         </div>
  11.     </div>
  12.     <div style="width: 100px">
  13.         <div class="bui-btn" b-click="page.addToB">添加到B</div>
  14.         <div class="bui-btn" b-click="page.addToA">添加到A</div>
  15.     </div>
  16.     <div class="span1">
  17.         <h2 class="bui-box"><div class="span1">列表2</div><b b-text="page.selectBChecked.length"></b>/<b b-text="page.selectB.length"></b></h2>
  18.         <div class="bui-select" b-template="page.tplSelectB(page.selectB)">
  19.         </div>
  20.     </div>
  21. </div>

预览

查看效果

2.2 代码优化版

优化了操作流程, 在原来的data增加多了2个状态: 这2个状态都是一个对象, 因为实际上想要的是 disabled这个样式名, 如果你的样式上, 是设计的 canAdd, canDel 作为样式名, 只需要布尔值就行.

  • canAdd 是否能够增加
  • canDel 是否能够删除

原先的4个方法, 优化成了2个, 一个点击的时候修改状态, 一个是合并数据.

原先的2个模板方法, 优化成了1个, 通过传进来的不同字段进行处理就行. 这里要理解,b-click='page.setStatus(${target},$index,${targetChecked})' ${target} 跟 $index 的区别.

注意: b-template 传过去的第一个值会被解析成数据, 其它参数传什么就是什么.

  1. /**
  2.  * 设计思路说明:
  3.  * 左边列表A: selectA
  4.  * 右边列表B: selectB
  5.  * 左边选中列表暂存区A: selectAChecked
  6.  * 右边选中列表暂存区B: selectBChecked
  7.  * 点击列表, 往暂存区存放对应的数据, 并且通过watch 暂存区的数据变更,把按钮的状态变成能够操作.
  8.  * 点击按钮添加到B, 则把右边列表数据,合并A选中的暂存区, 并删除选中状态, 清空A暂存区数据
  9.  * 点击按钮添加到A, 则把左边列表数据,合并B选中的暂存区, 并删除选中状态, 清空B暂存区数据
  10.  */
  12. var bs = bui.store({
  13.     scope: "page",
  14.     data: {
  15.         canAdd: {
  16.             disabled: true
  17.         },
  18.         canDel: {
  19.             disabled: true
  20.         },
  21.         selectAChecked: [], // A区选中暂存区
  22.         selectBChecked: [], // B区选中暂存区
  23.         selectA: [
  24.           { text: 'One', value: 'A', selected: false },
  25.           { text: 'Two', value: 'B', selected: false },
  26.           { text: 'Three', value: 'C', selected: false }
  27.         ],
  28.         selectB: [],
  29.     },
  30.     methods: {
  31.         setStatus: function (target,index,checked) {
  33.             var selectedItem = this[target][index],
  34.                 selecteds = this[checked],
  35.                 // 判断是否唯一
  36.                 indexs = bui.array.index(this[target][index].value,selecteds,"value");
  38.             // 选中暂存区的增加或减少
  39.             if( indexs > -1 ){
  40.                 selecteds.splice(indexs,1);
  41.             }else{
  42.                 selecteds.push(selectedItem);
  43.             }
  45.             // 修改选中状态
  46.             this[target][index].selected = !this[target][index].selected;
  47.             // 替换第几条数据并触发数据this[target] 的dom变更
  48.             bui.array.set(this[target],index,this[target][index]);
  49.         },
  50.         moveSelect: function (target,checked,targetB) {
  52.             // 修改按钮状态
  53.             var btn = checked == "selectBChecked" ? "canDel" : "canAdd";
  55.             if( this[btn].disabled ){ return; }
  57.             // 移动过去以后,不需要选中状态
  58.             this[checked].forEach(function (item) {
  59.                 item.selected = false;
  60.             })
  62.             // 合并并触发 this.selectB
  63.             bui.array.merge(this[target],this[checked]);
  65.             // 删除this.selectA选中数据,通过value字段比对,支持多个
  66.             bui.array.delete(this[targetB],this[checked],"value");
  68.             // 清空暂存区数据
  69.             bui.array.empty(this[checked]);
  70.         },
  71.     },
  72.     watch: {
  73.         selectAChecked: function (data) {
  74.             // 修改添加按钮状态
  75.             this.canAdd.disabled = !data.length;
  76.         },
  77.         selectBChecked: function (data) {
  78.             // 修改删除按钮状态
  79.             this.canDel.disabled = !data.length;
  80.         }
  81.     },
  82.     templates: {
  83.         // 联动的示例,增加了事件绑定
  84.         tplSelect: function (data,target,targetChecked) {
  86.             var html ='';
  87.             data.forEach(function (item,i) {
  88.                 var active = item.selected ? "active" : "";
  89.                 // $index 为内置的动态索引, i 不一定等于 $index
  90.                 html +=`<li b-click='page.setStatus(${target},$index,${targetChecked})' class="bui-btn ${active}">${item.text}</li>`;
  91.             })
  92.             return html;
  93.         }
  94.     }
  95. })
  1. <style type="text/css">
  2.     .bui-select .active {
  3.         color: red;
  4.     }
  5.     .btn-controls {
  6.         width: 1rem;
  7.         margin:0 .1rem;
  8.     }
  9.     .btn-controls .bui-btn{
  10.         margin-top:.1rem;
  11.     }
  12. </style>
  13. <div class="bui-box">
  14.     <div class ="span1">
  15.         <div class="subtitle bui-box">
  16.             <div class="span1">列表1</div>
  17.             <b b-text="page.selectAChecked.length"></b>/<b b-text="page.selectA.length"></b>
  18.         </div>
  19.         <div b-template="page.tplSelectA(page.selectA)" class="bui-list">
  20.         </div>
  21.     </div>
  22.     <div class="btn-controls">
  23.         <!-- 传多个数据源字段 -->
  24.         <div b-click="page.moveSelect(selectB,selectAChecked,selectA)" b-class="page.canAdd" class="bui-btn round">&gt;&gt;</div>
  25.         <div b-click="page.moveSelect(selectA,selectBChecked,selectB)" b-class="page.canDel" class="bui-btn round">&lt;&lt;</div>
  26.     </div>
  27.     <div class="span1">
  28.         <div class="subtitle bui-box">
  29.             <div class="span1">列表2</div>
  30.             <b b-text="page.selectBChecked.length"></b>/<b b-text="page.selectB.length"></b>
  31.         </div>
  32.         <div b-template="page.tplSelectB(page.selectB)" class="bui-list">
  33.         </div>
  34.     </div>
  35. </div>

预览

查看效果

4. 动态表单

  1. <div class="bui-page page-store page-input">
  2.     <header>
  3.         <div  lass="bui-bar">
  4.             <div class="bui-bar-left">
  5.                 <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
  6.             </div>
  7.             <div class="bui-bar-main">动态表单</div>
  8.             <div class="bui-bar-right">
  9.             </div>
  10.         </div>
  11.     </header>
  12.     <main>
  13.         <div class="bui-btn" b-click="page.add"><i class="icon-plus"></i>添加</div>
  14.         <div b-template="page.tplUser(page.users)">
  16.         </div>
  18.         <div class="container-xy">
  19.             <button class="bui-btn primary round" b-click="page.submitForm">提交</button>
  20.         </div>
  21.     </main>
  22. </div>

点击添加会新增一个动态表单, 注意 $index 的指向是指向 b-target="ul", 获得的索引,才是跟数据一一对应的.

  1. var bs = bui.store({
  2.     scope: "page", // 用于区分公共数据及当前数据的唯一值
  3.     data: {
  4.         users: [{
  5.             name: "",
  6.             id: ""
  7.         }],
  8.     },
  9.     methods: {
  10.         submitForm: function(e) {
  11.             console.log(this.users)
  12.             return false;
  13.         },
  14.         add: function() {
  15.             this.users.push({
  16.                 name: "",
  17.                 id: ""
  18.             })
  19.         },
  20.         remove: function(index) {
  21.             console.log(index)
  22.             bui.array.deleteIndex(this.users, index);
  23.         }
  24.     },
  25.     watch: {},
  26.     computed: {},
  27.     templates: {
  28.         tplUser: function(data) {
  29.             var html = `<ul class="bui-list">`;
  30.             var that = this;
  31.             data.forEach(function(item, index) {
  32.                 let length = that.users.length - 1;
  33.                 html += `<li class="bui-btn-title bui-box clearactive">表单${length}<div class="span1"></div><div class="bui-btn" b-click="page.remove($index)" b-target="ul"><i class="icon-remove"></i></div></li><li class="bui-btn bui-box clearactive">
  34.                 <label class="bui-label">姓名</label>
  35.                 <div class="span1">
  36.                     <div class="bui-value"><input type="text" name="fname" b-model="page.$index.name" b-target="ul"></div>
  37.                 </div>
  38.             </li>
  39.             <li class="bui-btn bui-box clearactive">
  40.                 <label class="bui-label">身份证</label>
  41.                 <div class="span1">
  42.                     <div class="bui-value"><input type="text" name="fname" b-model="page.$index.id" b-target="ul"></div>
  43.                 </div>
  44.             </li>`
  45.             })
  46.             html += `</ul>`
  48.             return html;
  49.         }
  50.     },
  51.     mounted: function() {
  52.         // 加载后执行
  53.     }
  54. })

总结

数据驱动的改变在于思路的转变, 合理的使用,可以大大的减少手动操作dom的代码. 数据驱动不比dom操作, 有可能需要去理解核心的业务以后才能上手, 所以在代码的设计数据上, 写上自己的设计思路, 这对于后面的维护会很有帮助.

bui.store 并不是必须用到的, 使用单页及模块化已经可以很好的处理各种问题. 只是在一些表单联动上, 你会发现这个真的很有用!