gpt4 book ai didi

javascript - html 中的 polymer 函数绑定(bind),以对象作为第二个参数

转载 作者:行者123 更新时间:2023-12-02 14:30:56 26 4
gpt4 key购买 nike

我在使用我正在创建的自定义本地化元素时遇到了 Polymer 1.x 的问题。当绑定(bind)到 HTML 中的函数时,我似乎无法将参数作为对象传递。 my-element textContent 将整个函数作为字符串获取,而不是函数的返回值。请参阅下面的示例代码以获取示例或此 jsfiddle:https://jsfiddle.net/4n2da6sr/1/

HTML:

<dom-module id="x-example">
<template>
<h1>[[getText('Hello world', {context: 'general'})]]</h1>
</template>
</dom-module>

<x-example></x-example>

JavaScript:

let strings = {
general: {
'Hello world': {
message: 'Hola Mundo'
}
};

Polymer({
is: 'x-example',
getText: function(key, options = {context: 'general'}) {
let context = options.context;
let localMessage = key;

if (strings && strings[context][key]) {
let message = strings[context][key].message;
localMessage = message || key;
}

return localMessage;
}
});

此 getText 函数仅返回本地化的消息或键,并使用第二个参数(对象)作为过滤消息的附加选项。因此,在上面的示例中,我希望得到以下输出:

"Hola Mundo"

但是我将整个函数计算为字符串:

"getText('Hello world', {context: 'general'})"

任何有关此问题的帮助将不胜感激。

最佳答案

A computed binding is similar to a computed property: it includes a computing function and zero or more arguments. Arguments can be dependent properties or string or number literals.

https://www.polymer-project.org/1.0/docs/devguide/data-binding#annotated-computed

调用 getText() 的问题在于,当它只接受字符串、数字和属性时,您正在传递对象文字。

如果您重新构造元素,使 optionsstrings 成为属性,您就可以使其正常工作。

<!doctype html>
<html>

<head>
<meta name="description" content="http://stackoverflow.com/questions/37841958">
<meta charset="utf-8">
<base href="http://polygit.org/components/">
<script href="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>

<body>

<dom-module id="x-example">
<template>
<h1>[[getText('Hello world', options, strings)]]</h1>
</template>
<script>
Polymer({
is: 'x-example',
properties: {
options: {
type: Object,
notify: true,
value: function() {
return {'context': 'general'};
}
},
strings: {
type: Object,
notify: true,
value: function() {
return {
'general': {
'Hello world': {
'message': 'Hola Mundo'
}
}
}
}
}
},
getText: function(key, options, strings) {
let context = options.context;
let localMessage = key;

if (strings[context][key]) {
let message = strings[context][key].message;

localMessage = message || key;
}

return localMessage;
}
});
</script>
</dom-module>

<x-example></x-example>
</body>

</html>

http://jsbin.com/tagohu/edit?html,console,output

关于javascript - html 中的 polymer 函数绑定(bind),以对象作为第二个参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37841958/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com