0
我的問題更概念化。我一直在read guide,API on the site,看起來some slides,但我沒有信心通過我的決定。我做了組件,但似乎可能會更好。如何優化我的代碼以獲得更好的性能?
我擔心許多標記<script id="metamorph-73-end" type="text/x-placeholder"></script>
問題1:如何減少呢?
問題2:計數標記==計數事件監聽器是否正確?
謝謝!
模板:
<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'); } } });
是的,正好。我尋找有關它的答案。謝謝 –