Polymer 2.0 iron-localstorage 两个数组

Question

我正在尝试用聚合物制作购物车，但我的知识不多我如何在模板中插入选定的数据 dom-repeat to array binding to iron localsotage e.model.item 它不起作用。

<dom-module id="shop-cart">
<template>
<iron-ajax url="list.json" last-response="{{ListProducts}}" auto>
</iron-ajax>

  <template is="dom-repeat" items="{{ListProducts}}">
     <p style="display:block;width:400px">
        <span>{{item.code}}</span>
        <span>{{item.title}}</span>
        <paper-button raised class="indigo" on-
        click="addProduct">Add</paper-button>
        <br/>
     </p>  

  </template>



 <iron-localstorage name="my-app-storage"
    value="{{Orders}}"
    on-iron-localstorage-load-empty="initializeDefaultOrders"
  ></iron-localstorage>


  <template is="dom-repeat" items="Orders" as="order">
      <div>
        <p>{{order.code}}</p>
        <p>{{order.title}}</p>
      </div> 
  </template>


</template>   

<script>
    class ShopCart extends Polymer.Element {
        static get is() {
            return 'shop-cart';
        }
        static get properties() {
            return {
                Product: {
                    type: String
                         },

                Orders: {
                        type: Array,
                        value() {
                            return [
                                {
                                code:'',
                                title:'',
                                }
                            ];
                        },
                        },
                ListProducts: {
                        type: Array,
                        value() {
                            return [];
                        },
                   }

            }
        }


        initializeDefaultOrders() {
              this.Orders = {
                code:'',
                title:''
              }
           };

        addProduct(e) {  
              this.Product= e.model.item.title;
              this.push('Orders',this.Product);
              this.set('Product','');


        }

        deleteProduct(e) {
            this.splice('Orders', e.model.index, 1);
        }

    }


    window.customElements.define(ShopCart.is, ShopCart);
    </script>
</dom-module>
<shop-cart></shop-cart>

Answer 1

传递给您的方法 addProduct(e) 的值与 ListProducts 项的数据模型无关。

这是一个购物车示例，它将选择（选中的复选框）绑定到项目的属性，item.selected。

https://github.com/renfeng/android-repository/blob/master/elements/android-sdk-manager.html#L267-L297

如果不需要复选框，您可以向按钮添加自定义属性。例如已选择

以下仅适用于聚合物 1。

<paper-button raised class="indigo" on-click="addProduct" selected="[[item.title]]">Add</paper-button>

并且，使用以下行来检索所选项目的标题。

this.Product= e.target.getAttribute("selected");

对于 Polymer 2，这是您的解决方法。

https://github.com/renfeng/Whosebug-question-44534326/commit/b2a4226bd5a1f5da7fa2d5a8819c53c65df7c412

已为 Polymer 2 提议自定义属性，但目前似乎未被接受。参见 https://github.com/Polymer/polymer/issues/4457

Polymer 2.0 iron-localstorage 两个数组

Polymer 2.0 iron-localstorage two arrays

javascript

arrays

polymer

以下仅适用于聚合物 1。

对于 Polymer 2，这是您的解决方法。