/cdnsrc/js/view/DocumentAreaView.js
JavaScript | 109 lines | 53 code | 20 blank | 36 comment | 2 complexity | a21ea49ebe0f406f65594861762e61ce MD5 | raw file
Possible License(s): Apache-2.0
- /**
- Aaron Greenlee
- http://aarongreenlee.com/
-
- This work is licensed under a Creative Commons Attribution-Share-Alike 3.0
- Unported License.
-
- // Original Info -----------------------------------------------------------
- Author : Aaron Greenlee
- Created : 12/19/2010 9:53:28 AM
-
- Document Area View for a Backbone.js example application.
-
- // Modifications :----------------------------------------------------------
-
- */
- var DocumentAreaView = Backbone.View.extend
- ({
- // Views always have a DOM element, even if it is invisible in the
- // page. This area view will be bound to an existing element, so, I
- // will use a jQuery selector to select the element. If I had not
- // done selected an existing element -- or defined a 'tagName',
- // backbone.js would have created a <div /> element that is simply
- // not yet associated with the document.
- el : $('#container')
-
- ,events : {
- 'click span.logCollection' : 'logCollection'
- }
- ,selectedLast: null
-
- ,selectedModel: null
-
- // Initialize our view.
- ,initialize: function () {
-
- //_.bindAll(this, 'addDocument', 'addAll', 'render');
- _.bindAll(this, 'addDocument');
-
- this.model.bind('refresh', this.render);
- //this.model.bind('all', this.render);
- this.layout = DocumentAreaTemplate;
-
- // Return this to allow chaining.
- return this;
- }
- ,render : function ()
- {
- // Use jQuery to select this view's element.
- $(this.el)
- .empty()
- .html(this.layout);
-
- // Render our Collection
- this.model.each(this.addDocument)
-
- // Return this to allow chaining.
- return this;
- }
-
- ,addDocument : function (Doc)
- {
-
- var ModelView = new DocumentListView
- ({
- // Bind the new list-item view to our new model instance.
- model : Doc
- // Optionally, you may also provide a id for the new HTML
- // element by passing it to our constructor.
- ,id : 'document_' + Doc.id
- ,parent : this
- });
- this.$('#documentListing ul').append( ModelView.render().el );
-
- // Return this to allow chaining.
- return this;
- }
-
- ,showDocument : function (Doc)
- {
-
- this.selectedModel = Doc;
- if(this.selectedLast) {
- this.selectedLast.change();
- }
- if(!this.selectedModel.hasChanged()) {
- this.selectedModel.change();
- }
-
- var ModelView = new DocumentDetailView({model : Doc});
- $('#documentDetailContainer').empty().html(
- ModelView.render().el
- );
-
- // Return this to allow chaining.
- return this;
- }
-
- // A simple helper method useful while I was developing the delete
- // feature.
- ,logCollection : function ()
- {
- console.log(this.model.models.length);
- }
- });