【问题标题】:Polymer 1.0: Refresh/Re-Render Computed Value Without Property BindingPolymer 1.0:在没有属性绑定的情况下刷新/重新渲染计算值
【发布时间】:2015-12-12 00:26:13
【问题描述】:

我正在尝试在Polymer 1.0 模板中重新计算和呈现一个值。但是,我正在尝试在不绑定任何属性的情况下执行此操作。

如果它很重要,用例是一种翻译机制,它使用字符串键来查找翻译后的值。当 'translations' 值改变时,translate() 调用需要重新计算。

组件定义如下:

<dom-module id="my-component">
    <template>
        <style></style>
        <p><span>[[translate("SOME_STRING")]]</span></p>
    </template>

    <script>
        var MyComponent = Polymer({
            is: "my-component",
            properties: {
                translations: {
                    type: Object,
                    notify: true,
                    value: {
                        "SOME_STRING": "Some String"
                    }
                }
            },
            translate: function (key) {
                if (this.translations.hasOwnProperty(key)) {
                    return this.translations[key];
                }
            }
        });
    </script>
</dom-module>

我可以通过将translations 属性添加到translate() 调用来使刷新工作,如下所示:

<p><span>[[translate("SOME_STRING", translations)]]</span></p>

但是,我想做的是重新计算/刷新,而不必在每次调用中将 translations 属性作为第二个参数(还有其他原因)。

基本上,当translations 对象使用不同的语言环境翻译更新时,我希望重新计算translate("SOME_STRING")。

这可能吗?有没有办法重新渲染模板,甚至只是手动重新渲染整个组件?如何?如果没有,在绑定中没有属性的情况下,获取计算值或重新渲染模板的最简单方法是什么?

【问题讨论】:

  • 我用 dom-if 做这样的事情。我将“已初始化”属性设置为 false,当翻译完成加载时,我将其设置为 true,这将渲染 dom-if 模板中的部分,从而评估计算值。虽然我今天在 Polymer 3,但我发现即使是 Polymer 1 也已经支持它。

标签: polymer-1.0


【解决方案1】:

怎么样????

<dom-module id="my-component">
<template>
    <style></style>
    <p><span>[[str]]</span></p>
</template>

<script>
    var MyComponent = Polymer({
        is: "my-component",
        properties: {
            translations: {
                type: Object,
                notify: true,
                value: {
                    "SOME_STRING": "Some String"
                },
                observer: '_Changed'
            },
            str: {
                type: String,
                value: "hello"
              }

        },
        _Changed: function(){
           this.set("str",this.translate(this.str));
        },
        translate: function (key) {
            if (this.translations.hasOwnProperty(key)) {
                return this.translations[key];
            }
        }
    });
</script>

【讨论】:

  • 感谢您的快速响应,Dam!
  • 大坝,我明白你想说什么......但这仍在使用模板中的属性。你的例子给了我一些想法,谢谢!但是,我需要看看这种方法是否有效。这不是我所希望的,但这可能是最好的答案。让我玩它,我会告诉你的。
  • 您想在您的网络中支持多种语言??
  • 是的...超过 1000 种翻译。我宁愿保持定义动态,而不是为每个定义创建一个属性。
  • 大坝,我可以 &lt;p&gt;&lt;span&gt;[[translations.SOME_STRING]]&lt;/span&gt;&lt;/p&gt; 代替这个。但是,我仍然需要它是一个计算值,因为需要传递一些参数。例如,&lt;p&gt;&lt;span&gt;[[translate("SOME_STRING", arg1, arg2)]]&lt;/span&gt;&lt;/p&gt;。到目前为止,刷新计算的唯一方法似乎是包含一个在活动区域​​设置更改时更新的属性...&lt;p&gt;&lt;span&gt;[[translate("SOME_STRING", activeLocale, arg1, arg2)]]&lt;/span&gt;&lt;/p&gt;。
猜你喜欢
  • 1970-01-01
  • 2021-10-04
  • 1970-01-01
  • 1970-01-01
  • 2017-12-31
  • 2019-06-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多