Polymer + Meteor，在 blaze #each 循环中，无法将对象传递给 Polymer Web 组件

Question

在单独的 Polymer 中，无需与 Meteor 结合，您可以通过简单地将对象传递给属性来将对象传递给 Polymer Web 组件。我已经成功地做到了这一点。在这里，我们将迭代中的 "state" 直接传递到名为的自定义聚合物 Web 组件中状态卡。

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

但是，在我的项目中，我结合了 Polymer 和 Meteor。
Polymer 的模板和 Meteor 的 blaze 模板不能混合……所以，这只是一个自定义的 Polymer web 组件。我无法在流星模板中使用 blaze #each 循环传递 Meteor 中的 "state" 对象。作为一个变通办法，我发现我只能将各个属性作为文本字符串传递像这样...

<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 Web 组件的一个片段，其属性如下 ...

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

我"really"想做的就是直接把对象传给polymer web component 像这样......但是，遗憾的是这行不通

<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>
    ...
 </template>
</polymer-element>

这个 SO question/answer 与我的问题 "very" 相似，但是，答案没有用，因为我有流星火焰模板并发症 ...

Similar SO question/answer

我"really"不想坚持我的工作...即使它有效。

我读过 elsewhere on SO 在 blaze #each 迭代中你可以像这样访问对象文字 ...

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

但是，我无法完成这项工作。我将非常感谢任何帮助和指导。我明白我想做什么，结合 Polymer 和 Meteor 有点问题，但是，我已经看到它完成了并且我取得了很多进步。我只是在这一点上绊倒了。谢谢！！！

Answer 1

在自定义聚合物元素上设置属性时，聚合物会尝试检测类型，并在为元素原型设置值时将属性如此投射 - 所以数字是数字，字符串是字符串，等。当您不从另一个聚合物元素中设置此属性时，事情会变得有点困难 - 就像尝试使用 blaze（以及任何其他非聚合物引擎，我想）来设置它。

Polymer 最终在你的对象字面量上运行 .toString() 产生了“[object Object]”，这没什么用。幸运的是，polymer 允许您将对象作为双引号 JSON 字符串从外界传入，例如 JSON.stringify(something).

的结果

最直接但不太优雅的方法是创建一个 stringify 帮助器并使用它来设置属性。

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

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

或

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

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

另一种选择是在应用程序的某个级别覆盖 toString 方法。使用流星的文档转换或 collection-helpers 包，您可以添加一个 toString 方法，它只是 returns JSON.stringify(this) - 如果您正在遍历游标。

很难只覆盖 Object.prototype.toString 并执行相同的操作。您会遇到循环引用错误，但看起来有几个库和方法可以在将对象 (this) 传递给 JSON.stringify 之前回收对象。我没试过这个，但看起来它会起作用。

无论哪种方式，如果属性设置为 JSON，它将作为聚合物元素中的实际对象提供。您甚至可以在该对象内的嵌套属性上设置观察者！

底线 - 似乎还没有完美的方法，所以现在将对象字符串化。希望对您有所帮助！

Polymer + Meteor，在 blaze #each 循环中，无法将对象传递给 Polymer Web 组件

Polymer + Meteor, in blaze #each loop, unable to pass object to Polymer web component

javascript

meteor

polymer

meteor-blaze