1 /** 2 * @fileOverview view for kissy mvc : event delegation,el generator 3 * @author yiminghe@gmail.com 4 */ 5 KISSY.add("mvc/view", function (S, Node, Base) { 6 7 var $ = Node.all; 8 9 function normFn(self, f) { 10 if (S.isString(f)) { 11 return self[f]; 12 } 13 return f; 14 } 15 16 /** 17 * @name View 18 * @class 19 * View for delegating event on root element. 20 * @memberOf MVC 21 * @extends Base 22 */ 23 function View() { 24 View.superclass.constructor.apply(this, arguments); 25 var events; 26 if (events = this.get("events")) { 27 this._afterEventsChange({ 28 newVal:events 29 }); 30 } 31 } 32 33 View.ATTRS = 34 /** 35 * @lends MVC.View# 36 */ 37 { 38 /** 39 * Get root element for current view instance. 40 * @type String 41 * @example 42 * <code> 43 * // selector : 44 * .xx 45 * // or html string 46 * <div>my</div> 47 * </code> 48 */ 49 el:{ 50 value:"<div />", 51 getter:function (s) { 52 if (S.isString(s)) { 53 s = $(s); 54 this.__set("el", s); 55 } 56 return s; 57 } 58 }, 59 60 /** 61 * Delegate event on root element. 62 * @type Object 63 * @example 64 * <code> 65 * events:{ 66 * selector:{ 67 * eventType:callback 68 * } 69 * } 70 * </code> 71 */ 72 events:{ 73 74 } 75 }; 76 77 78 S.extend(View, Base, 79 /** 80 * @lends MVC.View# 81 */ 82 { 83 84 _afterEventsChange:function (e) { 85 var prevVal = e.prevVal; 86 if (prevVal) { 87 this._removeEvents(prevVal); 88 } 89 this._addEvents(e.newVal); 90 }, 91 92 _removeEvents:function (events) { 93 var el = this.get("el"); 94 for (var selector in events) { 95 var event = events[selector]; 96 for (var type in event) { 97 var callback = normFn(this, event[type]); 98 el.undelegate(type, selector, callback, this); 99 } 100 } 101 }, 102 103 _addEvents:function (events) { 104 var el = this.get("el"); 105 for (var selector in events) { 106 var event = events[selector]; 107 for (var type in event) { 108 var callback = normFn(this, event[type]); 109 el.delegate(type, selector, callback, this); 110 } 111 } 112 }, 113 114 render:function () { 115 return this; 116 }, 117 118 /** 119 * Remove root element. 120 */ 121 destroy:function () { 122 this.get("el").remove(); 123 } 124 125 }); 126 127 return View; 128 129 }, { 130 requires:['node', 'base'] 131 });