加速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：减少手表

回答

相关问题