Javascript 以对象作为第二个参数的html聚合函数绑定_Javascript_Data Binding_Polymer

Javascript 以对象作为第二个参数的html聚合函数绑定

javascript data-binding polymer

Javascript 以对象作为第二个参数的html聚合函数绑定,javascript,data-binding,polymer,Javascript,Data Binding,Polymer,我在Polymer 1.x中遇到了一个问题，我正在创建一个自定义本地化元素。在HTML中绑定到函数时，似乎无法将参数作为对象传入。my元素textContent以字符串形式获取整个函数，而不是函数返回的值。请参阅下面的示例代码以获取示例或此JSFIDLE: HTML: 此getText函数仅返回本地化消息或键，并使用第二个参数（对象）作为筛选消息的附加选项。因此，在上面的示例中，我希望得到以下输出： "Hola Mundo" 但我将整个函数作为字符串进行计算： "getText('Hello

我在Polymer 1.x中遇到了一个问题，我正在创建一个自定义本地化元素。在HTML中绑定到函数时，似乎无法将参数作为对象传入。my元素textContent以字符串形式获取整个函数，而不是函数返回的值。请参阅下面的示例代码以获取示例或此JSFIDLE:

HTML:

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

"Hola Mundo"

但我将整个函数作为字符串进行计算：

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

如果您对此有任何帮助，我们将不胜感激。

将您的对象设置为属性，然后使用它

let字符串={
概述：{
“你好，世界”：{
信息：“Hola Mundo”
}
}
};
聚合物({
是：“x-example”，
特性：{
选项：{
类型：对象，
值：{上下文：'general'}
}
},
getText:function（键，选项={context:'general'}）{
让context=options.context；
让localMessage=key；
if（字符串和字符串[context][key]）{
let message=strings[context][key]。消息；
localMessage=message | |键；
}
返回本地消息；
}
});
正文{
字体系列：无衬线；
}

：主持人{
显示：块；
}
[[getText（'Hello world'，选项）]]
将对象设置为属性，然后使用它

let字符串={
概述：{
“你好，世界”：{
信息：“Hola Mundo”
}
}
};
聚合物({
是：“x-example”，
特性：{
选项：{
类型：对象，
值：{上下文：'general'}
}
},
getText:function（键，选项={context:'general'}）{
让context=options.context；
让localMessage=key；
if（字符串和字符串[context][key]）{
let message=strings[context][key]。消息；
localMessage=message | |键；
}
返回本地消息；
}
});
正文{
字体系列：无衬线；
}

：主持人{
显示：块；
}
[[getText（'Hello world'，选项）]]

计算绑定类似于计算属性：它包括
计算函数和零个或多个参数参数可以是
依赖属性或字符串或数字文字。

调用getText（）
的问题在于，您传递的是一个对象文本，而它只接受字符串、数字和属性
如果重新构造元素，使选项
和字符串
成为属性，则可以使其工作
<!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>


[[getText（'Hello world'，选项，字符串）]]
聚合物({
是：“x-example”，
特性：{
选项：{
类型：对象，
通知：正确，
值：函数（）{
返回{'context'：'general'}；
}
},
字符串：{
类型：对象，
通知：正确，
值：函数（）{
返回{
“将军”：{
“你好，世界”：{
“消息”：“Hola Mundo”
}
}
}
}
}
},
getText:函数（键、选项、字符串）{
让context=options.context；
让localMessage=key；
if（字符串[上下文][键]）{
let message=strings[context][key]。消息；
localMessage=message | |键；
}
返回本地消息；
}
});


计算绑定类似于计算属性：它包括
计算函数和零个或多个参数参数可以是
依赖属性或字符串或数字文字。

调用getText（）
的问题在于，您传递的是一个对象文本，而它只接受字符串、数字和属性
如果重新构造元素，使选项
和字符串
成为属性，则可以使其工作
<!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>


[[getText（'Hello world'，选项，字符串）]]
聚合物({
是：“x-example”，
特性：{
选项：{
类型：对象，
通知：正确，
值：函数（）{
返回{'context'：'general'}；
}
},
字符串：{
类型：对象，
通知：正确，
值：函数（）{
返回{
“将军”：{
“你好，世界”：{
“消息”：“Hola Mundo”
}
}
}
}
}
},
getText:函数（键、选项、字符串）{
让context=options.context；
让localMessage=key；
if（字符串[上下文][键]）{
let message=strings[context][key]。消息；
localMessage=message | |键；
}
返回本地消息；
}
});

我没有使用polymer，但我已经读到，在影子dom中，使用ID作为元素并依赖它进行链接会出错，而影子dom将使用不同的IDused@AMacdonald谢谢，但这只是示例代码，所以这只是为了让这里更容易阅读。我没有使用polymer，但我已经读到，在阴影dom中，使用ID作为元素并依赖它进行链接会出错，在阴影dom中，将使用不同的IDused@AMacdonald谢谢，但这只是示例代码，所以这只是为了让这里更容易阅读。
<!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>