2016-04-17 9 views
0

私はフィルタ付きアイテムのコレクションを持っています。フィルタは、いくつかのチェックボックスに基づいて適用されます。ユーザーが別の月を選択すると(項目が更新されると)アイテムのコレクションが変更されます。バックボーン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;  
      } 

答えて

0

私はこれが全体的に実装できるより良い方法があると思いますが、私はあなたの質問に答えて刺すつもりです。

まず、このコードは、ビューのレンダリングメソッドの一部であるように見えます。ビュー、コレクション、またはモデルから追加のコードを提供していないので、コレクションの更新されたデータにビューを適切に再バインドしていますか?そうでない場合は、このコードのスナップを基にして、私は、あなたがすべてのデータ/イベント・バインディングをコレクション・データにロードするようにビューを再レンダリングしなければならないかもしれないと考えています迷子:

$('#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を介して状態の変更を開始します。

コレクション、モデル、およびビュー全体からコードを提供できる場合は、この質問に対するより良い回答を提供することができます。私がここに見ていることに基づいて、私が解決することを知らない変数が多すぎます。

関連する問題