主幹js過濾器顯示

我有一個過濾器項目的集合。這些過濾器是基於一些複選框應用的。如果用戶選擇不同的月份（項目被刷新），則項目集合會發生更改。主幹js過濾器顯示

我的方法是遍歷每個項目，然後將過濾器應用到該項目，如果該項目是匹配顯示項目其他隱藏。此方法在加載期間的當前月份中工作，但是如果選擇了另一個月份，則會執行循環，並且如果評估爲false的條件仍然執行。我知道這個條件是錯誤的，因爲當我在控制檯中能看到的條件上放置一個斷點時，語句的計算結果爲false。即使錯誤，下一步進入條件。

這是代碼。

render: function() { 
       display = this.model.get('display'); 
       filters = this.model.get('filters'); 


       //Check each class for filter parameters 
       items.forEach(function (cla) { 

        //reset all items 
        $("#" + cla.id).parent().removeClass('matches'); 
        $("#" + cla.id).parent().removeClass('noMatches'); 


        //Get all filters 
        var hasCredit = "credits"; 
        var hasLocation = "location"; 
        var hasStarttime = "starttime"; 
        var hasAreaOfStudy = "areaOfStudy"; 
        var hasSpecialty = "specialty"; 
        var hasEventCode = "eventcode"; 
        var hasFormat = "format"; 
        var itemFilters = []; 

        if (filters.inputs.length == 0) { 
         $("#" + cla.id).parent().addClass('matches'); 
        } else { 
         //Loop over each filter 
         filters.inputs.forEach(function (el) { 


          //Check credit filter 
          if (el.name == 'credits') { 
           if (cla.credits.trim() == el.value) { 
            itemFilters.push(hasCredit); 
           } 
          } else if (el.name == 'specialty') { 
           if (jQuery.inArray(el.value.trim(), cla.specialty) !== -1) { 
            itemFilters.push(hasSpecialty); 
           } 
          } else if (el.name == 'areaOfStudy') { 
           if (jQuery.inArray(el.value, cla.areaOfStudy) !== -1) { 
            itemFilters.push(hasAreaOfStudy); 
           } 

          } else if (el.name == 'starttime') { 
           if (cla.starttime.trim() == el.value) { 
            itemFilters.push(hasStarttime); 
           } 
          } else if (el.name == 'location') { 
           if (cla.location.trim() == el.value) { 
            itemFilters.push(hasLocation); 
           } 
          } else if (el.name == 'eventcode') { 
           if (cla.id.trim() == el.value.trim()) { 
            itemFilters.push(hasEventCode); 
           } 
          } else if (el.name == 'format') { 
           if (cla.format == el.value) { 
            itemFilters.push(hasFormat); 
           } 
          } 
         }); 

         var isInputFilterMatch = applyInputFilter(filters.inputs, itemFilters); 

         //All non matching filters get a noMatch css classed applied to be hidden 
         if (isInputFilterMatch) { 
          $("#" + cla.id).parent().addClass('matches'); 
         } else { 
          $("#" + cla.id).parent().addClass('noMatches'); 
         } 
        } 

       }); 

       //Hide and show all matches and non matches 
       $('.noMatches').hide(); 
       $('.matches').show(); 

       $('#main_main_MainContent_CpeCalendar').parent('.hidden-results').show(); 

       // shifted over to apply this after the items are set 
       jQuery_1_4_2(".modal[href], .modal a[href]").colorbox(); 

       return this;  
      }

來源

2016-04-17 dtucker1914

我認爲有更好的方法可以全面實施，但我會試圖回答你的問題。

首先，這段代碼似乎是View的渲染方法的一部分。既然你沒有提供任何你的視圖，集合或模型的附加代碼，它會讓我問，你是否正確地將視圖重新綁定到集合中的更新數據？如果沒有，那麼基於你提供的這段代碼的縮減，我認爲你可能不得不重新渲染視圖，以便正確地獲取所有數據/事件綁定，以便在它逐月更改時加載收集數據，因爲它可能會迷路：

$('#main_main_MainContent_CpeCalendar').parent('.hidden-results').show(); 

// shifted over to apply this after the items are set 
jQuery_1_4_2(".modal[href], .modal a[href]").colorbox(); 

return this;

而是將所有這些您查看的render()方法裏面的，乳清你不打破這個代碼多達讓多一點的邏輯感，並使用骨幹給你的權力？下面是使用集合本身的filtering a Backbone Collection的示例（這是一種更合適和可維護的方法）。

從Backbone.Collection本身處理Backbone.Collection項目的過濾，並使用它的方便連接到數據庫（這是您的視圖和模型之間的同步，構成集合），如果用戶通過UI啓動狀態更改以確保數據完整性，而不是您在此處所做的操作。

如果您可以從集合，模型和視圖中完整提供代碼，那麼我可能會爲您提供對此問題的更好回答。根據我在這裏看到的，有太多的變數我不知道要解決。

來源

2016-04-18 05:34:38

主幹js過濾器顯示

回答

相關問題