backbone java_[Java教程]backbone.js1.3.3

[Java教程]backbone.js1.3.3

0 2016-06-18 12:00:08 1 // Backbone.View 2 // ------------- 3 4 // Backbone Views are almost more convention than they are actual code. A View 5 // is simply a JavaScript object that represents a logical chunk of UI in the 6 // DOM. This might be a single item, an entire list, a sidebar or panel, or 7 // even the surrounding frame which wraps your whole app. Defining a chunk of 8 // UI as a **View** allows you to define your DOM events declaratively, without 9 // having to worry about render order ... and makes it easy for the view to 10 // react to specific changes in the state of your models. 11 12 // Creating a Backbone.View creates its initial element outside of the DOM, 13 // if an existing element is not provided... 14 //option中可以传递的参数包括 15 //{model:模型名称, 16 // collection:集合名称， 17 // el：要将html模板添加到的元素， 18 // id:el的id属性，若没有el则默认创建id为这个的div，其属性为下面的attributes，tagName，className， 19 // attributes： 20 // tagName： 21 // className： 22 // events：该元素绑定的事件}， 23 // 在执行自定义的initialize时会将这些属性，events绑定到元素上 24 var View = Backbone.View = function(options) { 25 this.cid = _.uniqueId('view'); 26 this.preinitialize.apply(this, arguments); 27 _.extend(this, _.pick(options, viewOptions)); 28 this._ensureElement(); 29 this.initialize.apply(this, arguments); 30 }; 31 32 // Cached regex to split keys for `delegate`. 33 var delegateEventSplitter = /^(\S+)\s*(.*)$/; 34 35 // List of view options to be set as properties. 36 var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events']; 37 38 // Set up all inheritable **Backbone.View** properties and methods. 39 _.extend(View.prototype, Events, { 40 41 // The default `tagName` of a View's element is `"div"`. 42 tagName: 'div', 43 44 // jQuery delegate for element lookup, scoped to DOM elements within the 45 // current view. This should be preferred to global lookups where possible. 46 $: function(selector) { 47 return this.$el.find(selector); 48 }, 49 50 // preinitialize is an empty function by default. You can override it with a function 51 // or object. preinitialize will run before any instantiation logic is run in the View 52 preinitialize: function(){}, 53 54 // Initialize is an empty function by default. Override it with your own 55 // initialization logic. 56 initialize: function(){}, 57 58 // **render** is the core function that your view should override, in order 59 // to populate its element (`this.el`), with the appropriate HTML. The 60 // convention is for **render** to always return `this`. 61 render: function() { 62 return this; 63 }, 64 65 // Remove this view by taking the element out of the DOM, and removing any 66 // applicable Backbone.Events listeners. 67 remove: function() { 68 this._removeElement(); 69 this.stopListening(); 70 return this; 71 }, 72 73 // Remove this view's element from the document and all event listeners 74 // attached to it. Exposed for subclasses using an alternative DOM 75 // manipulation API. 76 _removeElement: function() { 77 this.$el.remove(); 78 }, 79 80 // Change the view's element (`this.el` property) and re-delegate the 81 // view's events on the new element. 82 setElement: function(element) { 83 this.undelegateEvents(); 84 this._setElement(element); 85 this.delegateEvents(); 86 return this; 87 }, 88 89 // Creates the `this.el` and `this.$el` references for this view using the 90 // given `el`. `el` can be a CSS selector or an HTML string, a jQuery 91 // context or an element. Subclasses can override this to utilize an 92 // alternative DOM manipulation API and are only required to set the 93 // `this.el` property. 94 _setElement: function(el) { 95 this.$el = el instanceof Backbone.$ ? el : Backbone.$(el); 96 this.el = this.$el[0]; 97 }, 98 99 // Set callbacks, where `this.events` is a hash of100 //101 // *{"event selector": "callback"}*102 //103 // {104 // 'mousedown .title': 'edit',105 // 'click .button': 'save',106 // 'click .open': function(e) { ... }107 // }108 //109 // pairs. Callbacks will be bound to the view, with `this` set properly.110 // Uses event delegation for efficiency.111 // Omitting the selector binds the event to `this.el`.112 delegateEvents: function(events) {113 events || (events = _.result(this, 'events'));114 if (!events) return this;115 this.undelegateEvents();116 for (var key in events) {117 var method = events[key];118 if (!_.isFunction(method)) method = this[method];119 if (!method) continue;120 var match = key.match(delegateEventSplitter);121 this.delegate(match[1], match[2], _.bind(method, this));122 }123 return this;124 },125 126 // Add a single event listener to the view's element (or a child element127 // using `selector`). This only works for delegate-able events: not `focus`,128 // `blur`, and not `change`, `submit`, and `reset` in Internet Explorer.129 delegate: function(eventName, selector, listener) {130 this.$el.on(eventName + '.delegateEvents' + this.cid, selector, listener);131 return this;132 },133 134 // Clears all callbacks previously bound to the view by `delegateEvents`.135 // You usually don't need to use this, but may wish to if you have multiple136 // Backbone views attached to the same DOM element.137 undelegateEvents: function() {138 if (this.$el) this.$el.off('.delegateEvents' + this.cid);139 return this;140 },141 142 // A finer-grained `undelegateEvents` for removing a single delegated event.143 // `selector` and `listener` are both optional.144 undelegate: function(eventName, selector, listener) {145 this.$el.off(eventName + '.delegateEvents' + this.cid, selector, listener);146 return this;147 },148 149 // Produces a DOM element to be assigned to your view. Exposed for150 // subclasses using an alternative DOM manipulation API.151 _createElement: function(tagName) {152 return document.createElement(tagName);153 },154 155 // Ensure that the View has a DOM element to render into.156 // If `this.el` is a string, pass it through `$()`, take the first157 // matching element, and re-assign it to `el`. Otherwise, create158 // an element from the `id`, `className` and `tagName` properties.159 _ensureElement: function() {160 if (!this.el) {161 var attrs = _.extend({}, _.result(this, 'attributes'));162 if (this.id) attrs.id = _.result(this, 'id');163 if (this.className) attrs['class'] = _.result(this, 'className');164 this.setElement(this._createElement(_.result(this, 'tagName')));165 this._setAttributes(attrs);166 } else {167 this.setElement(_.result(this, 'el'));168 }169 },170 171 // Set attributes from a hash on this view's element. Exposed for172 // subclasses using an alternative DOM manipulation API.173 _setAttributes: function(attributes) {174 this.$el.attr(attributes);175 }176 177 });

本文网址：http://www.shaoqun.com/a/232552.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：[e-mail]。

JS

0