前の記事では、コンポーネントに「項目の削除」機能を追加しました。今度は、「項目の追加」機能を追加します。
まず、追加された機能をトリガーするボタンをページに追加します (赤枠内の内容が前回の記事と比較して新しく追加されたコードです)。
main.js でボタンのクリック イベントをバインドして、追加関数をトリガーします。
smartList.js に add 関数を記述します。
1 // 增加一条数据 2 SmartList.prototype.add = function (data) { 3 4 var isExist = false; 5 6 // 判断id是否已存在 7 $.each(this.list, function (i, val) { 8 if (val.id === data.id) { 9 isExist = true;10 return false; // 退出循环11 }12 });13 14 if (isExist) {15 console.log('SmartList: id ' + data.id + ' 已存在,无法添加');16 return;17 }18 19 this.list.push(data);20 this._genItem(data).appendTo(this.element);21 };
これで、コード $.each(this.list, function (i, val) {...} の行が繰り返されていることがわかります。これは、追加で使用され、削除でも使用されますここで、この繰り返しのコードを置き換える関数を作成できますか? そこで、次のように _getById メソッドを作成します。
1 SmartList.prototype._getById = function (id, callback) { 2 var self = this; 3 var data = null; 4 5 $.each(this.list, function (i, val) { 6 if (val.id === id) { 7 data = val; 8 if (callback && typeof callback === 'function') 9 callback(i, data);10 return false;11 }12 });13 14 return data;15 };
これで、_getById メソッドを使用して、remove メソッドと add メソッドを書き換えることができます。書き換え前後の比較は次のとおりです:
完全なコードは次のとおりです:
index.html:
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>Flexx</title> 5 <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> 6 <link rel="stylesheet" href="./css/main.css"> 7 <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> 8 <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> 9 <script src="./js/flexx.js"></script>10 <script src="./js/smartList.js"></script>11 <script src="./js/main.js"></script>12 </head>13 <body>14 <div class="container">15 <h1>Flexx Library</h1>16 <hr>17 <div class="row">18 <div class="col-xs-6">19 <div class="row">20 <div class="col-xs-12">21 <button id="btnAdd" class="btn btn-success">22 <i class="glyphicon glyphicon-plus"></i> 23 </button>24 </div>25 </div>26 <br>27 <div id="memberList"></div>28 </div>29 <div class="col-xs-6">30 <div id="groupList"></div>31 </div>32 </div>33 </div>34 </body>35 </html>View Code
smartList。 js:
1 /** 2 * SmartList 3 * 4 * 数据源:id为必须项 5 */ 6 7 + function (Flexx) { 8 'use strict'; 9 10 // 定义一个SmartList类 11 function SmartList(selector, options) { 12 13 this.list = []; 14 15 // 覆盖默认属性 16 this.options = $.extend({ 17 // 默认属性 18 isDeletable: true, // 设置是否有行删除按钮 19 isEditable: true // 设置是否有行编辑按钮 20 }, options); 21 22 this.element = $(selector) 23 .addClass('panel-group xx-smartlist'); 24 25 console.log('----创建了一个SmartList对象----'); 26 } 27 28 // 更新列表 29 SmartList.prototype.setData = function (list) { 30 var self = this; 31 // 更新list数据 32 this.list = list; 33 // 清空dom容器 34 this.element.html(''); 35 // 渲染元素 36 $.each(this.list, function (i, data) { 37 self._genItem(data).appendTo(self.element); 38 }); 39 40 console.log('-> setData done', this.element); 41 }; 42 43 // 增加一条数据 44 SmartList.prototype.add = function (data) { 45 if(this._getById(data.id)){ 46 console.log('SmartList: id ' + data.id + ' 已存在,无法添加'); 47 return; 48 } 49 this.list.push(data); 50 this._genItem(data).appendTo(this.element); 51 }; 52 53 SmartList.prototype.remove = function (id) { 54 var self = this; 55 56 this._getById(id, function (i, data) { 57 self.list.splice(i, 1); 58 self.element.find('[data-id="' + id + '"]').remove(); 59 }); 60 }; 61 62 SmartList.prototype._getById = function (id, callback) { 63 var self = this; 64 var data = null; 65 66 $.each(this.list, function (i, val) { 67 if (val.id === id) { 68 data = val; 69 if (callback && typeof callback === 'function') 70 callback(i, data); 71 return false; 72 } 73 }); 74 75 return data; 76 }; 77 78 // 生成一个条目 79 SmartList.prototype._genItem = function (data) { 80 var self = this; 81 var heading = 'heading_' + data.id; 82 var collapse = 'collapse_' + data.id; 83 var html = [ 84 '<div class="panel panel-default" data-id="' + data.id + '">', 85 '<div class="panel-heading" role="tab" id="' + heading + '">', 86 '<h4 class="panel-title">', 87 '<a role="button" data-toggle="collapse" data-parent="#memberList" href="#' + 88 collapse + '" aria-expanded="true" aria-controls="' + collapse + '">', 89 data.title, 90 '</a>', 91 this.options.isDeletable ? '<i data-act="del" class="glyphicon glyphicon-remove pull-right"></i>' : '', 92 this.options.isEditable ? '<i data-act="edit" class="glyphicon glyphicon-pencil pull-right"></i>' : '', 93 '</h4>', 94 '</div>', 95 '<div id="' + collapse + '" class="panel-collapse collapse" role="tabpanel" aria-labelledby="' + heading + '">', 96 '<div class="panel-body">', 97 data.content, 98 '</div>', 99 '</div>',100 '</div>'101 ].join('');102 103 var item = $(html);104 105 if (this.options.isDeletable) {106 item.find('[data-act="del"]').click(function () {107 self.remove(data.id);108 });109 }110 111 return item;112 };113 114 Flexx.SmartList = SmartList;115 116 }(window.xx = window.xx || {});View Code
main.js:
1 + function () { 2 'use strict'; 3 4 // 创建一个用来测试的模拟数据 5 var members = [{ 6 id: 0, 7 title: 'Brandon', 8 content: 'hello' 9 }, {10 id: 1,11 title: 'Kim',12 content: 'hi'13 }, {14 id: 2,15 title: 'Bunny',16 content: 'hi'17 }, {18 id: 3,19 title: 'Lovelyun',20 content: 'hi'21 }];22 23 var groups = [{24 id: 1,25 title: 'Web Dev',26 content: 'hello again'27 }];28 29 $(function () {30 // 初始化一个SmartList的实例对象31 var memberList = new xx.SmartList('#memberList');32 var groupList = new xx.SmartList('#groupList', {33 isDeletable: false,34 isEditable: false35 });36 // 调用原型方法更新数据37 memberList.setData(members);38 groupList.setData(groups);39 40 $('#btnAdd').click(function () {41 memberList.add({42 id: 4,43 title: 'add',44 content: 'hi'45 });46 });47 48 });49 50 }();View Code
概要:
1. コードの重複を最小限に抑える。コールバック関数 >