Polymer 自定义元素中的聚合数据绑定

我遵循了中的示例，但没有可用的代码

我正在尝试为我正在制作的怪物创建工具制作一个形状聚合物元素，因为我的一个朋友对怪物战斗游戏有很好的想法，我想帮助他跟踪他的想法

所以我为怪物属性字段创建了一个自定义元素。由于我们不能100%确定所有的统计数据最终会是什么，我想让它尽可能模块化

<link rel="import" href="../../../bower_components/paper-input/paper-input.html">

<!-- Calling noscript until I can better understand -->
<polymer-element name="monster-stat-field"
attributes = "stat value"
noscript
>

<template>
    <div id="name">
        {{stat}}
    </div>
    <div id="value">
        <paper-input
            type="number"
            error="Required, needs to be a number!"
            required
            label="{{stat}}"
            value="{{value}}"
            layout vertical>
        </paper-input>
    </div>
</template>

</polymer-element>

{{stat}}

当然，这可能会继承纸张输入

我所做的是将其嵌套在另一个自定义聚合物元素中：

<link rel="import" href="../monster-stat-field/monster-stat-field.html">
<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">

<!-- Calling noscript until I can better understand -->
<polymer-element name="monster-form"
attributes = "name desc stats"
noscript
>
<template>
    <p>
        <paper-input
            label="Monster Name"
            value="{{name}}"
            required
            floatingLabel
            error="Required Field!">
        </paper-input>
    </p>
    <p>
        <paper-input
            label="Description"
            value="{{desc}}"
            floatingLabel>
        </paper-input>
    </p>
    <template repeat="{{s in stats}}">
            <p>
                <monster-stat-field stat="{{s.name}}" value="{{s.value}}">
                </monster-stat-field>
            </p>
    </template>

    <paper-button label="Save" raisedButton></paper-button>
</template>

</polymer-element>

在我的主页上，我有：

<link rel="import" href="static/customComponents/monster/monster-form/monster-form.html">
...some other stuff...
    <monster-form
        name="Amalgam"
        desc="The Liquid Metal"
        stats="[
            {name: 'hp', value: 60},
            {name: 'cost', value: 60},
            {name: 'ene', value: 90},
            {name: 'str', value: 90},
            {name: 'wis', value: 75},
            {name: 'def', value: 95},
            {name: 'man', value: 90},
            {name: 'agi', value: 100}
            ]"
    ></monster-form> <br/>
    <p>Here is calling the monster stat field manually</p> <br/>
    <monster-stat-field stat="HP" value="60">
    </monster-stat-field>

…其他一些东西。。。


这里是手动调用怪物统计字段

所以！我所展示的是怪物的名字和描述，但是统计数据根本不存在。手动调用它确实有效，但我觉得这很奇怪，因为我没有显式导入它

---

这是因为我在叫noscript吗？还是别的什么？任何帮助都将不胜感激。谢谢大家!

您需要更改两件事才能使其正常工作：

stats

属性的JSON字符串不正确。哈希键周围需要双引号：

stats='[
            {"name": "hp", "value": 60},
            {"name": "cost", "value": 60},
            {"name": "ene", "value": 90},
            {"name": "str", "value": 90},
            {"name": "wis", "value": 75},
            {"name": "def", "value": 95},
            {"name": "man", "value": 90},
            {"name": "agi", "value": 100}
]'

您需要提示

stats

属性的类型，以便Polymer知道需要将其转换为数组。从

monster form

元素中删除

noscript

属性，并添加一个

创建的

处理函数：

<script>
    Polymer('monster-form', {
        created: function() {
            this.stats = [];
        }
    });
</script>

聚合物（“怪物形态”{
已创建：函数（）{
this.stats=[]；
}
});

---

现在Polymer将

stats

属性字符串转换为一个数组（对象）

两个次要注意事项：（1）Polymer的最新版本将在尝试JSON转换之前将单引号转换为双引号（但JSON仍然要求您引用所有键）。（2） 您可以通过简单地将hint

stats

放在您的原型上（作为

stats:[]

）来键入hint

stats

，只要您承诺永远不会

推送它（不首先创建新的数组）。好的一点是，在这种情况下我不会这样做，它们应该只是存储值。