具有默认值的聚合物对象属性

Peter 发表于 Dev

彼得

我想在我的自定义元素中设置一个options对象属性，当用户不提供它时它将采用默认值。

<!DOCTYPE html>
<html>
<head>
    <script src="bower_components/platform/platform.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
    <my-element options="{{{
                option_1: 'val1',
                option_2: 'val2',
                allow_this: true,
                allow_that: false
            }}}">
    </my-element>
</body>
</html>

<polymer-element name="my-element" attributes="options">
    <template>
        <ul>
            <!-- ... -->
        </ul>
    </template>

    <script>
        Polymer('my-element', {
            options: {
                option_1: 'default_val1',
                option_2: 'default_val2',
                allow_this: false,
                allow_that: false
            }
        });
    </script>

</polymer-element>

上面的代码不起作用，因为在元素构造函数中指定的值始终会覆盖我尝试传递的值。如何设置它，以便将选项值设置为传递的值，而默认值仅用作备用值？

斯科特·迈尔斯

您可以使用属性中的JSON将对象值传递到已发布的属性中，但是它必须严格是有效的JSON（http://jsonlint.com/）。

在这种情况下，请尝试：

<my-element options='{
            "option_1": "val1",
            "option_2": "val2",
            "allow_this": true,
            "allow_that": false
        }'>
</my-element>

注意属性上的单引号和JSON本身内的双引号。JSON规范要求双引号。

请注意，这不是数据绑定，因此它不使用胡须符号{{ }}。相反，您只是在属性中描述一个字符串值，Polymer会将其反序列化（JSON.parse）为对象。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。