[英]Polymer, core-ajax shared response
我試圖使用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響應都被連接到一個共享列表變量,而不是在每個重復的模板上實例化其自己的本地列表變量,因此,當子模板被觸發時,它會在每個部分中為總和生成<workspace-elem>
。來自所有ajax調用的數據。
有沒有簡單的方法來解決這個問題? 我有什么事要看嗎?
編輯:
內部模板也會發生同樣的問題。 每個實例化的內部模板共享list變量,如果將任何內容推送到template.model.list,則所有實例化的模板模型都將更新。
當您在模板中使用response={{list}}
時,您不是在創建該變量,而是將response屬性的值綁定到一個名為“ 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"
')。 然后,模板的模型就是模板本身,但是由於我沒有經常使用此工具,因此我不太確定(這可能是因為您失去了綁定到“視圖”的能力)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.