2013-10-06 131 views
0

我的問題更概念化。我一直在read guideAPI 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'); 
     } 
    } 
}); 

回答

1

我要說的是,你的擔心是沒有必要的。標籤數量並不一定意味着動作偵聽器的數量。有些標籤是聽衆,有些則不是。你有正確的數量:每個元素1。

這是你在找什麼?

+0

是的,正好。我尋找有關它的答案。謝謝 –

相關問題