Polymer、core-ajax 共享响应

Question

使用 Polymer，我正在尝试使用模板绑定 <template repeat=...> 实例化多个 ajax-服务元素。

代码如下：

<template repeat="{{viewName, i in views}}">                           
      <section hash={{viewName}} layout vertical center-center on-tap={{closeOpenDrawer}}>
          <core-ajax id="ajaxService" auto response={{list}}" url="../componentsItems/demo-components.json"></core-ajax>
             <template repeat="{{element, j in list}}">
                 <workspace-elem class="dropped" name="{{element.name}}"></workspace-elem>
             </template>     
       </section>
</template>

问题是，每个 ajax 响应都连接到一个共享列表变量，而不是为每个重复模板实例化自己的本地列表变量，因此当子模板被触发时，它会生成 [=2=每个部分中的 ] 是所有 ajax 调用的数据总和。

有没有简单的方法可以解决这个问题？是不是有什么东西我没看清楚？

编辑：

内部模板也出现了同样的问题。每个实例化的内部模板共享列表变量，如果有任何东西被推送到 template.model.list，所有实例化的模板模型都会更新。

Answer 1

当您在模板中使用 response={{list}} 时，您并不是在创建该变量，而是将响应属性的值绑定到一个名为“list”的现有变量。

您需要问自己的问题是：“我要绑定的“列表”变量来自哪里？”从您提到的代码片段中看不出来，但很可能来自一些封闭的自定义元素，所以它很自然地在模板的迭代之间共享（尽管我很惊讶它被连接而不是被覆盖......）。我认为一个好的解决方案是将外部模板中的代码封装在自定义元素中以保存变量：

<polymer-element name="my-element" attributes="viewName">
   <template>
     <!--Your original code starts here-->
     <section hash={{viewName}} layout vertical center-center>
      <core-ajax id="ajaxService" auto response={{list}}" url="../componentsItems/demo-components.json"></core-ajax>
         <template repeat="{{element, j in list}}">
             <workspace-elem class="dropped" name="{{element.name}}"></workspace-elem>
         </template>     
   </section>
   <!--Your original code ends here-->
   </template>
   <script>
     Polymer({
       publish: {
         list: null
       },
       created: function() {
          // Create your array on instantiation of an element
          this.list = [];
       }
     }
   </script>
</polymer-element>

<template repeat="{{viewName, i in views}}">                           
    <my-element on-tap={{closeOpenDrawer}}></my-element>
</template>

我认为这应该可以解决您的问题。或者，我认为将外部模板设为自动绑定模板（‘is="auto-binding"’）可能会有所帮助。然后模板的模型就是模板本身，但由于我没有经常使用这个工具，我不太确定（可能是你失去了绑定到“视图”的能力）。

Polymer、core-ajax 共享响应

Polymer, core-ajax shared response

javascript

ajax

web-component

polymer