優雅地根據模型的屬性遍歷骨干集合

Question

我有一個主干集合，並且基於集合內模型的屬性，我遍歷集合並將其顯示在UI中。

邏輯是，如果模型的屬性isNewCar為true ，那么我將首先在UI中將它們全部顯示，然后是分隔符，然后將所有屬性為isNewCar模型顯示為false 。

this.cars.forEach(function (car, index) 
{
    if(car.isNewCar()){ //IF A NEW CAR
        //some logic.
        //Attach current view in DOM with this model's properties           
    }   
});

//Here, Attach some separator in DOM

this.cars.forEach(function (car, index) 
{
    if(!car.isNewCar()){ //IF 'NOT' A NEW CAR
        //some logic.
        //Attach current view in DOM with this model's properties           
    }
}); 

這看起來很亂，我知道它不是那么優雅，有人可以建議用更好的解決方案替換上面代碼的更好方法嗎？

Answer 1

我建議有一個通用的渲染邏輯來在單獨的函數renderCars（）中渲染項目並按如下所示過濾集合

 function filterCars(isNew) {
   var isNewCar = isNew
   return function(car) {
      return (car.isNewCar() === isNewCar);
   }
 }

 renderCars (this.cars.filter(filterCars(true)) );
 renderCars (this.cars.filter(filterCars(false)) );

上面我們做的所有事情都是創建一個輔助函數filterCars，該布爾函數需要一個布爾值來決定是否需要新車。 此輔助函數返回用於過濾汽車的函數。

骨干過濾器使用下划線過濾器，該過濾器返回過濾結果的新數組。 我將其傳遞給通用渲染功能。

我沒有對此進行測試，但這應該有助於清除一些重復的代碼。