Question

所以我要做的主要是使用JS和Polymer功能实现购物车。

这是我的元素（简化）。

店铺购物车

<template>
  <div class="shoppingMainContainer">
    <div class="cartTitle">Cart</div>
    <paper-dialog-scrollable>
      <template is="dom-repeat" items="{{shoppingList}}">
        <div class="shoppingItem">
          <div class="itemName">{{item.name}}</div>
          <div class="itemDivider"></div>
          <paper-input value="{{item.quantity}}" max="99" min="1" auto-validate allowed-pattern="[0-9]" label="num" class="itemQuantity" no-label-float type="number">
          </paper-input>
          <div class="itemDivider"></div>

        </div>
        </template>
    </paper-dialog-scrollable>
    <div class="divider"></div>
    <div class="cartActions">
      <paper-button on-tap="_clearShoppingList" id="clearCartButton">Clear all</paper-button>
      <paper-button id="checkoutButton">Checkout</paper-button>
    </div>
  </div>
  </template>


</dom-module>

<script type="text/javascript">
    Polymer ({
        is: "shop-cart",


    ready: function(){
      this.shoppingList = [



      ];
    },

    _clearShoppingList: function() {
      this.shoppingList = [];
    },


  });
</script>

产物的卡

<template>
    <template is="dom-repeat" items="{{productsList}}">
        <paper-card
        elevation="1"
        id="{{item.id}}"    
        class="white">
        <div id="cardHeader" class="header style-scope paper-card">
          <iron-image class="cardImage" sizing="contain" src="{{item.image}}"></iron-image>
          <div id="miniHeadeText" class="title-text over-image style-scope paper-card">{{item.name}}</div>
        </div>
        <div class="card-content">
          <div class="description">{{item.content}}</div>

        </div>
        <div class="card-actions">
          <paper-icon-button on-tap="_addToCart" icon="icons:add-shopping-cart"></paper-icon-button>
          <paper-button class="open-button" noink">Details</paper-button>
        </div>
        <paper-ripple></paper-ripple>
      </paper-card>
      </template>
  </template>
</dom-module>

<script type="text/javascript">
    Polymer ({
        is: "product-card",




     ready: function(){
      this.productsList = [{
        "id": 0,
        "name": "1",
      },{
        "id": 1,
        "name": "2",
      },{
        "id": 2,
        "name": "3",
      },{
        "id": 3,
        "name": "4",
      },{
        "id": 4,
        "name": "5",
      },{
        "id": 5,
        "name": "6",
      }];
    },




  _addToCart: function(event) {
    this.fire("addItem",this.productsList[event.model.item.id]);
  }

    });
</script>

app.js

(function (document) {
    document.addEventListener('addItem',function(data){
      document.querySelector('shop-cart').shoppingList.push(data.detail);
    })
}

_addToCart 方法应该将一个对象添加到shoppingList（属于shop-cart），其属性取自特定的product-card元素。我不知道为什么它不起作用。如果您可以向我指出我的代码中的错误，或者（甚至更好）想出更好地实现这个概念，请做。

感谢。

Answer 1

强制改变对象或数组的更改无法被观察到。如果您有一个简单的属性，如：

this.name = 'Jane';

Polymer会自动创建一个 setter ，它会自动获取该属性的任何更改。但是，对象子属性或数组（如shoppingList）的更改将不起作用：

this.users.push({ name: 'Andre'});

使用原生Array.push不会调用用户的setter，因此不能自动观察。

对象子属性：

this.address.street = 'Elm Street';

不会调用地址设置器，也不会检测到更改。

Polymer提供了对子属性和数组进行可观察更改的特定方法，在上面的示例中，您需要调用：

this.set('address.street', 'Elm Street');

就数组而言：

this.push('users', { name: 'Andre'});

在您的具体情况下，您应该更改 app.js 以确保对 shoppingList 数组的更改是可观察的：

document.addEventListener('addItem',function(data) {
  document.querySelector('shop-cart').push('shoppingList', data.detail);
});

使用Polymer中元素之间的交互将对象添加到数组

1 个答案: