聚合物+流星，在火焰中#each循環，無法將對象傳遞到聚合物網絡組件

Question

單獨聚合物，沒有與流星相結合，您可以將對象傳遞給聚合物網絡組件，只需將它傳遞給屬性即可。我在這方面取得了成功。 在這裏，我們將迭代中的「狀態」直接傳遞到名爲 狀態卡的自定義聚合物網絡組件中。

<template repeat="{{state in states}}"> 
 
\t <state-card class="state-card" stateObj={{state}}></state-card> 
 
</template>

然而，在我的項目，我結合聚合物和流星。
聚合物的模板和流星的火焰模板不能混合......所以，這只是一個定製的聚合物Web組件。 我無法通過流星模板中的#each循環傳遞Meteor中的「狀態」對象。 作爲工作一個圓，我發現我只能通過個別屬性的文本字符串 是這樣的...

<template name="inbox"> 
 
    <div class="content" flex> 
 
     {{#each states}} 
 
      <state-card class="state-card" name={{name}} status={{status}} displayType={{displaytype}}></state-card> 
 
     {{/each}} 
 
    </div> 
 
</template>

實現以上，這裏是一個片段從與像這樣的屬性定製聚合物的網狀物部分...

<polymer-element name="state-card" attributes="name status displayType" on-click="cardClicked"> 
 
    <template> 
 
    ... 
 
    </template> 
 
</polymer-element>

我「真的」想要做的只是通過在對象直接到聚合物web組件 像這樣......不過，遺憾的是這是行不通的

<template name="inbox"> 
 
    <div class="content" flex> 
 
     {{#each states}} 
 
      <state-card class="state-card" stateObj={{this}}></state-card> 
 
     {{/each}} 
 
    </div> 
 
</template>

理想情況下，我應該能夠接受，像這樣一個屬性的對象...

<polymer-element name="state-card" attributes="stateObj" on-click="cardClicked"> 
 
    <template> 
 
    ... 
 
\t </template> 
 
</polymer-element>

這太問題/答案是「非常」類似我的問題，但答案沒有工作，因爲我有 流星火焰模板併發症...

Similar SO question/answer

我「真的「不想堅持我的工作，即使它工作。

我讀過elsewhere on SO在大火#each迭代，你可以訪問該對象的文字是這樣的...

{{#each humans}} 
 
    {{this}} 
 
{{/each}}

但是，我不能做這樣的工作。我會非常感謝任何幫助和指導。我明白我想要做什麼，將Polymer和Meteor結合起來有點問題，但是我已經看到它完成了，並取得了很大進展。我只是在這一點上磕磕絆絆。謝謝！！！

Answer 1

當設置一個自定義的聚合物元件上的屬性，聚合物試圖檢測的類型和與您的元件原型設定值時，投射的屬性作爲這樣 - 所以數字是數字和字符串是字符串等事情變得當你沒有從另一種聚合物元素中設置這個屬性時 - 比如試圖用火焰（以及任何其他非聚合物引擎，我想象）來設置它的時候更難一些。

聚合物末端你的對象文本產生「[對象的對象]」，其是沒有什麼用處的上運行.toString()。幸運的是，聚合物可以讓您從外部世界將雙引號JSON字符串傳遞給對象，如JSON.stringify(something)的結果。

最簡單的，但不能作爲優雅的方法是創建一個字符串化助手並用它來設置屬性。

Template.registerHelper('stringify', function(obj) { 
    return JSON.stringify(obj); 
}); 

{{#each things}} 
    <my-component something={{stringify this}}></my-component> 
{{/each}} 

OR

Template.registerHelper('stringThis', function() { 
    return JSON.stringify(this); 
}); 

{{#each things}} 
    <my-component something={{stringThis}}></my-component> 
{{/each}} 

另一個選擇可能是在你的應用程序一定程度上覆蓋toString方法。使用流星的文檔轉換或collection-helpers包，您可以添加toString方法，只返回JSON.stringify（this） - 如果您正在迭代遊標。

這很難僅僅覆蓋Object.prototype.toString，做同樣的，雖然。你會得到循環引用錯誤，但它看起來像是有一些庫和方法在將對象傳遞給JSON.stringify之前去除對象（this）。我沒有試過這個，但似乎它會工作。

無論哪種方式，如果屬性被設置爲JSON，這將是可用的作爲聚合物元件內的實際對象。你甚至可以在該對象內設置嵌套屬性的觀察者！

底線 - 似乎有不是一個完美的路要走，所以字符串化對象現在。希望有所幫助！