聚合物+流星，在火焰中#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，这将是可用的作为聚合物元件内的实际对象。你甚至可以在该对象内设置嵌套属性的观察者！

底线 - 似乎有不是一个完美的路要走，所以字符串化对象现在。希望有所帮助！