Question

同样的重型方法＆＃34; quantityOf(garment)＆＃34;被称为集合中每个项目的四次。

这意味着如果有人点击某个项目会有很大的延迟，它必须重新计算每个项目。

来自名为＆＃34; garment＆＃34;的集合中的每个product list列出来了。将服装添加到订单时，会将它们添加到集合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>

重型职责＆＃39;方法：（这里_。指的是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
  }
};

我根本无法想到一种更简单，更轻松的方式来实现此功能。

尝试解决方案 我应该创建一个名为＆＃34; presentItems＆＃34;跟踪添加到lineitems的ID？也许搜索会更快？

我是否应该向productlist集合添加一个属性，一个名为＆＃34;添加＆＃34;的布尔值，我可以用它来引用是否已添加此项目？

Answer 1

实际解决方案

上面的问题原来是一个红鲱鱼！虽然很少有观察者很好 - 上面显然很笨重但真正的问题是当你在iOS上按下按钮时会延迟300ms。

如果你正在使用Angular，那么就是解决方案 http://joegaudet.com/angular/mobile/2013/07/22/fast-clicks-with-angular-js.html

否则，搜索＆＃34;谷歌快速按钮＆＃34; - 有一些JS库包含了谷歌代码。

<强>解决方案

感谢您的所有帮助。

这是对我有用的解决方案：添加一个名为＆＃34的布尔值;添加＆＃34;到garment中的product list。修改产品列表很奇怪，但它很快并且有效。

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);
    }
  }

加速AngularJS：减少手表

1 个答案: