views/tabs/tabs.js

   1 define([\r
   2 'libs/text!./templates/main.html',\r
   3 'libs/text!./templates/handle.html',\r
   4 'libs/underscore-min',\r
   5 'libs/backbone-min',\r
   6 ], function(mainTemplate, handleTemplate, _, Backbone) {\r
   7     'use strict';\r
   8     \r
   9     var View = Backbone.View.extend({\r
  10         className: 'rng-view-tabs',\r
  11         \r
  12         events: {\r
  13             'click ul a': '_onTabTitleClicked' \r
  14         },\r
  15         \r
  16         initialize: function() {\r
  17             this.template = _.template(mainTemplate),\r
  18             this.handleTemplate = _.template(handleTemplate);\r
  19             this.contents = {};\r
  20             this.selectedTab = null;\r
  21         },\r
  22         \r
  23         render: function() {\r
  24             this.$el.html(this.template());\r
  25             this.nodes = {\r
  26                 tabBar: this.$('.rng-view-tabs-tabBar'),\r
  27                 content: this.$('.rng-view-tabs-content')\r
  28             }\r
  29         },\r
  30         \r
  31         addTab: function(title, slug, content) {\r
  32             if(this.contents[slug])\r
  33                 return false;\r
  34             this.contents[slug] = content;\r
  35             this.nodes.tabBar.append(this.handleTemplate({title:title, slug: slug}));\r
  36             if(!this.selectedTab)\r
  37                 this.selectTab(slug);\r
  38         },\r
  39         \r
  40         selectTab: function(slug) {\r
  41             if(slug !== this.selectedTab && this.contents[slug]) {\r
  42                 this.trigger('leaving', this.selectedTab);\r
  43                 \r
  44                 if(this.selectedTab)\r
  45                     this.contents[this.selectedTab].detach();\r
  46                 this.nodes.content.append(this.contents[slug]);\r
  47                 this.nodes.tabBar.find('.active').removeClass('active');\r
  48                 this.nodes.tabBar.find('a[href="#'+slug+'"]').parent().addClass('active');\r
  49                 \r
  50                 this.selectedTab = slug;\r
  51                 this.trigger('tabSelected', slug);\r
  52             }\r
  53         },\r
  54         \r
  55         /* Events */\r
  56         \r
  57         _onTabTitleClicked: function(e) {\r
  58             e.preventDefault();\r
  59             var slug = $(e.target).attr('href').substr(1);\r
  60             this.selectTab(slug);\r
  61         }\r
  62     });\r
  63 \r
  64     \r
  65     return {\r
  66         View: View\r
  67     }\r
  68     \r
  69 \r
  70 });