How can I optimize my code for more performance?

Question

My question more conceptual. I have been read guide , API on the site and looked some slides , but I haven't confidence by my decision. I made component, but it seems it may be better.

I worried about many tags <script id="metamorph-73-end" type="text/x-placeholder"></script>

Question 1: How can I reduce it?

Question 2: Is true that count tags == count event listeners?

Thanks!

Templates:

 <script type="text/x-handlebars" data-template-name="components/bootstrap-select"> <a class="btn dropdown-toggle btn-mini" data-toggle="dropdown" href="#"> {{selected_name}} <span class="caret"></span> </a> <ul class="dropdown-menu"> {{#each items}} <li {{action "chosen" this.id this.name on="click" }}><a href="#">{{this.name}}</a></li> {{/each}} </ul> </script> <script type="text/x-handlebars" data-template-name="components/filter-offers"> <span class="label_filter">Фильтр </span> {{bootstrap-select name="filter_day" data=App.CONSTANTS.DAYS_OF_WEEK selected=0}} {{bootstrap-select name="filter_city" data=App.CONSTANTS.CITIES selected=2}} {{bootstrap-select name="filter_section" data=App.CONSTANTS.SECTION selected=1}} </div> </script> 

JavaScript:

 App.BootstrapSelectComponent = Em.Component.extend({ tagName: 'div', classNames: ['ember-view', 'btn-group'], // custom fileds name: '', data: [], items: function(){ return this.get('data').map(function(row){ return Em.Object.create({id: row[0], name: row[1]}); }); }.property('data'), selected: NaN, selected_name: function(){ var id = this.get('selected'), item = this.get('items').filter(function(item, index){ if (item.id == id) return true; }); if (item[0] && 'name' in item[0]) return item[0]['name']; else return ''; }.property('selected'), // setup actions action_name: function(){ var name = 'select_updated_' + this.get('name'); return name.camelize(); }.property(), actions: { chosen: function(value, name) { // save to memory this.set('selected', value); // bubble action this.sendAction('action_name', this.get('selected'), this.get('selected_name')); } } }); App.FilterOffersComponent = Em.Component.extend({ init: function() { this._super(); }, templateName: 'filter-offers', didInsertElement: function(){ //console.log(this.get('childViews').mapProperty('selected')); }, // setup actions action: function(){ // by default filterOffersUpdated var name = this.get('templateName') + '_updated'; return name.camelize(); }.property('templateName'), actions: { selectUpdatedFilterDay: function(){ this.sendAction('action'); }, selectUpdatedFilterCity: function(){ this.sendAction('action'); }, selectUpdatedFilterSection: function(){ this.sendAction('action'); } } }); 

Answer 1

I would say that your concern isn't necessary. Number of tags does not necessarily mean number of action listeners. Some tags are listeners, some aren't. You have just the right amount: 1 per element.

Is that what you were looking for?