加速AngularJS：減少手錶

同一重型方法「quantityOf(garment)」被稱爲一組中的每個項目四次。加速AngularJS：減少手錶

這意味着如果有人點擊一個項目會有很大的滯後，它必須重新計算每個項目。

列出了來自名爲「product list」的集合的每個garment。當服裝被添加到訂單中時，它們被添加到集合Order.lineitems。該quantityOf(garment)方法着眼於每件衣服多少次出現Order.lineitems

的HTML：

<div ng-switch="orderCtrl.quantityOf(garment)" ng-class="{ 'clicked': orderCtrl.quantityOf(garment) > 0 }" ng-click="orderCtrl.addGarment(garment)"> 

    <button type="button" ng-show="orderCtrl.quantityOf(garment) > 0"> 
    &times; 
    </button> 

    <div ng-switch-when="0> 
    <span class="glyphicon glyphicon-plus"></span> 
    </div> 
    <div ng-switch-default> 
    {{orderCtrl.quantityOf(garment)}}&times; 
    </div> 

    <p> 
    {{garment.name}} 
    </p> 
</div>

的 '重型' 的方法：（這裏_指lodash方法https://lodash.com/docs#findIndex）

this.quantityOf = function(garment){ 
    var index = _.findIndex(this.order.lineitems, function(b){ 
    return b.id === garment.id; 
    }); 

    if (index != -1){ 
    return this.order.lineitems[index].quantity 
    } else { 
    return 0 
    } 
};

我簡直無法想到一個更簡單，更輕便的方式來實現此功能。

在嘗試解決 我應該創建一個名爲「presentItems」一個新的角度陣列跟蹤被添加到了LineItem的ID的？也許搜索速度會更快？

我應該向productlist集合添加一個屬性，名爲「added」的布爾值，可以用來引用是否已添加該項目？

來源

2014-11-05 Will Taylor

我反而試圖找到一種方法，無需執行quantityOf得到的數量。或者至少將第一次在服裝上打電話的結果存儲起來，以便您只需要一次。當所有四次都有相同的結果時，執行四次是沒有意義的。 – 2014-11-05 22:08:36

一種選擇是將數量屬性添加到默認爲0的所有服裝中，並且當向訂單中添加或從訂單中刪除服裝時，服裝上的數量屬性也會更新。 – 2014-11-05 22:14:00

var index = _。pluck（this.order.lineitems，'id'）。indexOf（garment.id）;可能是更快找到索引的方法，因爲它使用本機進行一半的工作，而pluck（）比用戶着陸函數獲得更多的優化 – dandavis 2014-11-06 00:05:40

實際解決方案

上面竟然是一個紅色的鯡魚的問題！儘管擁有較少的觀察者是很好的 - 上面顯然很笨拙，但真正的問題是當您按下iOS上的按鈕時，延遲爲300毫秒。

如果你使用的角度，這裏的解決方案 http://joegaudet.com/angular/mobile/2013/07/22/fast-clicks-with-angular-js.html

否則，搜索「Google快鍵」 - 有一些包的谷歌代碼的一些JS庫。

解決方案

感謝所有的幫助。

這是爲我工作的解決方案：在product list的garment中添加一個名爲「added」的布爾值。修改產品列表很奇怪，但速度很快，而且很有效。

HTML

<div ng-switch="garment.added" ng-class="{ 'clicked': garment.added }" ng-click="orderCtrl.addGarment(garment)"> 

    <button ng-click="orderCtrl.removeGarment(garment); $event.stopPropagation()" ng-show="garment.added" > 
    &times; 
    </button> 

    <div ng-switch-default type="button" class="btn btn-link add-button"> 
    <span class="glyphicon glyphicon-plus"></span> 
    </div> 
    <div ng-switch-when="true" type="button" class="btn btn-link add-button"> 
    {{orderCtrl.quantityOf(garment)}}&times; 
    </div> 

    <p> 
    {{garment.name}} 
    </p> 
</div>

角：

function addGarment(garment){ 
    var index = _.findIndex(this.order.lineitems, function(b){ 
     return b.id === garment.id; 
    }); 

    if (index != -1){ 
     this.order.lineitems[index].quantity += 1; 
    } else { 
     garment.added = true; // ADDED 
     var new_garment = garment; 
     new_garment['quantity'] = 1; 
     this.order.lineitems.push(garment); 
    } 
    } 


    function removeGarment(garment) { 
    var index = _.findIndex(this.order.lineitems, function(b){ 
     return b.id === garment.id; 
    }); 
    if (index == -1) return; 

    if (this.order.lineitems[index].quantity > 1){ 
     this.order.lineitems[index].quantity -= 1; 
    } else { 
     garment.added = false; // ADDED 
     this.order.lineitems.splice(index, 1); 
    } 
    }

來源

2014-11-06 09:31:17

加速AngularJS：減少手錶

回答

相關問題