聚合物+流星,在火焰#每个循环中,无法将对象传递到聚合物网组件

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

本文关键字:聚合物 对象 组件 循环 流星 火焰      更新时间:2023-09-26

在Polymer中,不需要与Meteor组合,只需将对象传递到属性即可将对象传递给聚合物web组件。我在这方面做得很成功。在这里,我们将迭代中的"状态"直接传递到名为州卡。

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

然而,在我的项目中,我将聚合物和流星结合在一起
聚合物的模板和流星的火焰模板不能混合。。。因此,这只是一个自定义的聚合物网页组件。我无法通过流星模板中每个循环都有火焰#的流星中的"状态"对象。作为一个工作循环,我发现我只能将单个属性作为文本字符串传递就像这样。。。

<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组件的片段,该组件具有类似so。。。

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

这个SO问题/答案与我的问题"非常"相似,但是,答案不起作用,因为我有流星闪耀模板复杂度。。。

类似SO问题/答案

我"真的"不想坚持我的工作。。。尽管它有效。

我在SO的其他地方读过,在每次迭代中,你都可以访问对象文字,比如。。。

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

但是,我无法做到这一点。如果有任何帮助和指导,我将不胜感激。我知道我想做的是,将Polymer和Meteor结合起来有点问题,但是,我已经看到了这一点,我已经取得了很大的进步。我只是在这一点上磕磕碰碰。谢谢

在自定义聚合物元素上设置属性时,聚合物会尝试检测类型,并在元素原型上设置值时按原样强制转换属性,因此数字就是数字,字符串就是字符串,等等。当你不从另一个聚合物元素中设置这个属性时,事情会变得有点困难——比如试图使用blaze(我想是其他任何非聚合物引擎)来设置它。

Polymer最终在对象文字上运行.toString(),生成"[object object]",这几乎没有什么用处。幸运的是,polymer允许您从外部世界以双引号JSON字符串的形式传递对象,就像JSON.stringify(something)的结果一样。

最简单但不那么优雅的方法是创建一个字符串辅助对象并使用它来设置属性。

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包,您可以添加一个只返回JSON.stringfy(this)的toString方法——如果您在游标上迭代的话。

不过,很难只覆盖Object.prototype.toString并执行同样的操作。您会遇到循环引用错误,但在将对象(this)传递给JSON.stringify之前,似乎有几个库和方法可以对对象进行去循环。我还没有尝试过,但似乎可以。

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

最重要的是,似乎还没有一个完美的方法,所以现在要把物体串起来。希望能有所帮助!